﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, Grid, Grid plugin, Grid View, Help Documentation, jQuery dataGrid, jQuery Mobile Grid, JavaScript Mobile Grid, Responsive Grid, Adaptive Grid Layout" />
    <meta name="description" content="This page represents the help documentation of the jqxGrid widget." />
    <title>jqxGrid API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">Properties</h2>
        <table class="documentation-table">
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Appearance
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Name
                </th>
                <th>Type
                </th>
                <th>Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span79'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>rtl</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({rtl : true}); </code></pre>
                        <p>
                            Get the <code>rtl</code> property.
                        </p>
                        <pre><code>var rtl = $('#jqxGrid').jqxGrid('rtl'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bnPLG/">rtl is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span201'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.
                        </p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
                        In order to set a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />
                                The following code example adds the 'energyblue' theme.
                                <pre><code>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt;
</code></pre>
</code></pre>
                            </li>
                            <li>Set the widget's theme property to 'energyblue' when you initialize it.
                            </li>
                        </ul>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HgGqs/">theme is set to 'energyblue'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>altrows</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the alternating rows.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>altrows</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ altrows: false}); </code></pre>
                        <p>
                            Get the <code>altrows</code> property.
                        </p>
                        <pre><code>var altrows = $('#jqxGrid').jqxGrid('altrows'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4zAHJ/">altrows is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>altstart</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>1
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This property specifies the first alternating row.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>altstart</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ altstart: 2}); </code></pre>
                        <p>
                            Get the <code>altstart</code> property.
                        </p>
                        <pre><code>var altstart = $('#jqxGrid').jqxGrid('altstart'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VRYVU/">altstart is set to 2</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>altstep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>1
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the alternating step
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>altstep</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ altstep: 2}); </code></pre>
                        <p>
                            Get the <code>altstep</code> property.
                        </p>
                        <pre><code>var altstep = $('#jqxGrid').jqxGrid('altstep'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QucxJ/">altstep is set to 2</a>
                        </div>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span92'>clipboard</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the clipboard operations
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>clipboard</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ clipboard: false}); </code></pre>
                        <p>
                            Get the <code>clipboard</code> property.
                        </p>
                        <pre><code>var clipboard = $('#jqxGrid').jqxGrid('clipboard'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Dp5tA/">clipboard is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span110'>enablekeyboarddelete</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the delete of a cell/row values by using the "delete" key.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>enablekeyboarddelete</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ enablekeyboarddelete: false}); </code></pre>
                        <p>
                            Get the <code>enablekeyboarddelete</code> property.
                        </p>
                        <pre><code>var enablekeyboarddelete = $('#jqxGrid').jqxGrid('enablekeyboarddelete'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cqrnt/">enablekeyboarddelete is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span200'>showdefaultloadelement</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines whether the Grid should display the built-in loading element or should use a DIV tag with class 'jqx-grid-load'
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showdefaultloadelement</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showdefaultloadelement: false}); </code></pre>
                        <p>
                            Get the <code>showdefaultloadelement</code> property.
                        </p>
                        <pre><code>var showdefaultloadelement = $('#jqxGrid').jqxGrid('showdefaultloadelement'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BZpBE/">showdefaultloadelement is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span199'>autoshowloadelement</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines whether the loading image should be displayed until the Grid's data is loaded.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>autoshowloadelement</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ autoshowloadelement: false}); </code></pre>
                        <p>
                            Get the <code>autoshowloadelement</code> property.
                        </p>
                        <pre><code>var autoshowloadelement = $('#jqxGrid').jqxGrid('autoshowloadelement'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HgU6P/">autoshowloadelement is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span146'>autoshowfiltericon</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.filter.js)</p>
                        <p>
                            Displays the filter icon only when the column is filtered. When the value of this property is set to false, all grid columns will display a filter icon when the filtering is enabled.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>autoshowfiltericon</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ autoshowfiltericon: false}); </code></pre>
                        <p>
                            Get the <code>autoshowfiltericon</code> property.
                        </p>
                        <pre><code>var autoshowfiltericon = $('#jqxGrid').jqxGrid('autoshowfiltericon'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cUaH7/">autoshowfiltericon is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span34'>closeablegroups</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            When the value of this property is true, a close button is displayed in each grouping column.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>closeablegroups</code> property specified.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ closeablegroups: false}); </code></pre>
                        <p>
                            Get the <code>closeablegroups</code> property.
                        </p>
                        <pre><code>var closeablegroups = $('#jqxGrid').jqxGrid('closeablegroups'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7UCsH/">closeablegroups is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span184'>handlekeyboardnavigation</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            The function is called when a key is pressed. If the result of the function is true, the default keyboard navigation will be overriden for the pressed key.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>handlekeyboardnavigation</code> function.
                        </p>
                        <pre><code>
var handleKeys = function(event)
{
   var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
}
$('#jqxGrid').jqxGrid({ handlekeyboardnavigation: handleKeys});

                        </code></pre>
                        <p>
                            Get the <code>handlekeyboardnavigation</code> function.
                        </p>
                        <pre><code>var handlekeyboardnavigation = $('#jqxGrid').jqxGrid('handlekeyboardnavigation'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SZcnP/">handlekeyboardnavigation is set to a custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span180'>enableellipsis</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines whether ellipsis will be displayed, if the cells or columns content overflows.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>enableellipsis</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ enableellipsis: false}); </code></pre>
                        <p>
                            Get the <code>enableellipsis</code> property.
                        </p>
                        <pre><code>var enableellipsis = $('#jqxGrid').jqxGrid('enableellipsis'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QBxfk/ ">enableellipsis is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span213'>enablemousewheel</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines whether mousewheel scrolling is enabled.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>enablemousewheel</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ enablemousewheel: false}); </code></pre>
                        <p>
                            Get the <code>enablemousewheel</code> property.
                        </p>
                        <pre><code>var enablemousewheel = $('#jqxGrid').jqxGrid('enablemousewheel'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QLt6b/ ">enablemousewheel is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span40'>columnsmenuwidth</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>15
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxmenu.js)</p>
                        <p>
                            Sets or gets the columns menu width.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>columnsmenuwidth</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ columnsmenuwidth: 20}); </code></pre>
                        <p>
                            Get the <code>columnsmenuwidth</code> property.
                        </p>
                        <pre><code>var columnsmenuwidth = $('#jqxGrid').jqxGrid('columnsmenuwidth'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zLunZ/ ">columnsmenuwidth is set to 100</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span107'>autoshowcolumnsmenubutton</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxmenu.js)</p>
                        <p>
                            Sets or gets whether the columns menu button will be displayed only when the mouse cursor is over a columns header or will be always displayed.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>autoshowcolumnsmenubutton</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ autoshowcolumnsmenubutton: false}); </code></pre>
                        <p>
                            Get the <code>autoshowcolumnsmenubutton</code> property.
                        </p>
                        <pre><code>var autoshowcolumnsmenubutton = $('#jqxGrid').jqxGrid('autoshowcolumnsmenubutton'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PmqY7/ ">autoshowcolumnsmenubutton is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span43'>enableanimations</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the grid animations.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>enableanimations</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ enableanimations: false}); </code></pre>
                        <p>
                            Get the <code>enableanimations</code> property.
                        </p>
                        <pre><code>var enableanimations = $('#jqxGrid').jqxGrid('enableanimations'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sDC74/">enableanimations is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span44'>enabletooltips</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the grid tooltips.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>enabletooltips</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ enabletooltips: false}); </code></pre>
                        <p>
                            Get the <code>enabletooltips</code> property.
                        </p>
                        <pre><code>var enabletooltips = $('#jqxGrid').jqxGrid('enabletooltips'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n8Q3z/">enabletooltips is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span45'>enablehover</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the grid rows hover state.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>enablehover</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ enablehover: false}); </code></pre>
                        <p>
                            Get the <code>enablehover</code> property.
                        </p>
                        <pre><code>var enablehover = $('#jqxGrid').jqxGrid('enablehover'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nA66a/">enablehover is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span197'>enablebrowserselection</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables the text selection of the browser.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>enablebrowserselection</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ enablebrowserselection: true}); </code></pre>
                        <p>
                            Get the <code>enablehover</code> property.
                        </p>
                        <pre><code>var enablebrowserselection = $('#jqxGrid').jqxGrid('enablebrowserselection'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pRQLd/">enablebrowserselection is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>groupsrenderer</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            This function is called when a group is rendered. You can use it to customize the default group rendering.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the  <code>groupsrenderer</code> function.
                        </p>
                        <pre><code> 
var groupsrenderer = function (text, group, expanded) {
    return "<span>" + group + "</span>";
}

$("#jqxGrid").jqxGrid(
{
    source: source,
    groupsrenderer: groupsrenderer,
    columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry' }
    ],
    groupable: true,
    groups: ['ShipCity']
});
            </code></pre>
                        <p>
                            Get the <code>groupsrenderer</code> function.
                        </p>
                        <pre><code>var groupsrenderer = $('#jqxGrid').jqxGrid('groupsrenderer'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wzSxU/">groupsrenderer is set to a custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>groupcolumnrenderer</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            Sets or gets a custom renderer for the grouping columns displayed in the grouping header when the grouping feature is enabled.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>groupcolumnrenderer</code> function.
                        </p>
                        <pre><code>
var groupcolumnrenderer = function (text) {
return '&lt;div style=&quot;padding: 5px; float: left; color: Blue;&quot;&gt;' + text + '&lt;/div&gt;';
}

$("#jqxgrid").jqxGrid(
{
    source: source,
    groupcolumnrenderer: groupcolumnrenderer,
    columns: [
    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
    { text: 'Ship Country', datafield: 'ShipCountry' }
    ],
    groupable: true,
    groups: ['ShipCity']
});
                        </code></pre>
                        <p>
                            Get the <code>groupcolumnrenderer</code> function.
                        </p>
                        <pre><code>var groupcolumnrenderer = $('#jqxGrid').jqxGrid('groupcolumnrenderer'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UHUNy/">groupcolumnrenderer is set to a custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>groupsexpandedbydefault</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            Sets or gets the default state of the grouped rows.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>groupsexpandedbydefault</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ groupsexpandedbydefault: true}); </code></pre>
                        <p>
                            Get the <code>groupsexpandedbydefault</code> property.
                        </p>
                        <pre><code>var groupsexpandedbydefault = $('#jqxGrid').jqxGrid('groupsexpandedbydefault'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/66MVd/">groupsexpandedbydefault is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>pagerrenderer</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.pager.js)</p>
                        <p>
                            The function is called when the Grid Pager is rendered. This allows you to customize the 
                            default rendering of the pager.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>pagerrenderer</code> property.
                        </p>
                        <pre><code>
var pagerrenderer = function () {
    var element = $(&quot;&lt;div style='margin-top: 5px; width: 100%; height: 100%;'&gt;&lt;/div&gt;&quot;);
    var paginginfo = $(&quot;#jqxgrid&quot;).jqxGrid('getpaginginformation');
    for (i = 0; i &lt; paginginfo.pagescount; i++) {
        var anchor = $(&quot;&lt;a style='padding: 5px;' href='#&quot; + i + &quot;'&gt;&quot; + i + &quot;&lt;/a&gt;&quot;);
        anchor.appendTo(element);
        anchor.click(function (event) {
            var pagenum = parseInt($(event.target).text());
            $(&quot;#jqxgrid&quot;).jqxGrid('gotopage', pagenum);
        });
    }

    return element;
}

$(&quot;#jqxgrid&quot;).jqxGrid(
{
    width: 670,
    source: source,
    pagerrenderer: pagerrenderer,
    sortable: true,
    pageable: true,
    autoheight: true,
    columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
        { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
        { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
    ]
});
                        </code></pre>
                        <p>
                            Get the <code>pagerrenderer</code> property.
                        </p>
                        <pre><code>var pagerrenderer = $('#jqxGrid').jqxGrid('pagerrenderer'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5fsjV/">pagerrenderer is set to a custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span147'>showfiltercolumnbackground</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.filter.js)</p>
                        <p>
                            When this property is true, the Grid adds an additional visual style to the grid cells in the filter column(s).
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showfiltercolumnbackground</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showfiltercolumnbackground: false}); </code></pre>
                        <p>
                            Get the <code>showfiltercolumnbackground</code> property.
                        </p>
                        <pre><code>var showfiltercolumnbackground = $('#jqxGrid').jqxGrid('showfiltercolumnbackground'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tkhgy/">showfiltercolumnbackground is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span189'>showfiltermenuitems</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.filter.js)</p>
                        <p>
                            Determines whether to display the filtering items in the column's menu.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showfiltermenuitems</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showfiltermenuitems: false}); </code></pre>
                        <p>
                            Get the <code>showfiltermenuitems</code> property.
                        </p>
                        <pre><code>var showfiltermenuitems = $('#jqxGrid').jqxGrid('showfiltermenuitems'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XGMaf/">showfiltermenuitems is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span148'>showpinnedcolumnbackground</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            When this property is true, the Grid adds an additional visual style to the grid cells in the pinned column(s).
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showpinnedcolumnbackground</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showpinnedcolumnbackground: false}); </code></pre>
                        <p>
                            Get the <code>showpinnedcolumnbackground</code> property.
                        </p>
                        <pre><code>var showpinnedcolumnbackground = $('#jqxGrid').jqxGrid('showpinnedcolumnbackground'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HAxEf/">showpinnedcolumnbackground is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span149'>showsortcolumnbackground</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.sort.js)</p>
                        <p>
                            When this property is true, the Grid adds an additional visual style to the grid cells in the sort column.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showsortcolumnbackground</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showsortcolumnbackground: false}); </code></pre>
                        <p>
                            Get the <code>showsortcolumnbackground</code> property.
                        </p>
                        <pre><code>var showsortcolumnbackground = $('#jqxGrid').jqxGrid('showsortcolumnbackground'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8m6qj/">showsortcolumnbackground is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span190'>showsortmenuitems</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.sort.js)</p>
                        <p>
                            Determines whether to display the sort menu items.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showsortmenuitems</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showsortmenuitems: false}); </code></pre>
                        <p>
                            Get the <code>showsortmenuitems</code> property.
                        </p>
                        <pre><code>var showsortmenuitems = $('#jqxGrid').jqxGrid('showsortmenuitems'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FLZzf/">showsortmenuitems is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span191'>showgroupmenuitems</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            Determines whether to display the group menu items.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showgroupmenuitems</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showgroupmenuitems: false}); </code></pre>
                        <p>
                            Get the <code>showgroupmenuitems</code> property.
                        </p>
                        <pre><code>var showgroupmenuitems = $('#jqxGrid').jqxGrid('showgroupmenuitems'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UcQUE/">showgroupmenuitems is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>showrowdetailscolumn</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows an additional column with expand/collapse toggle buttons when the Row details feature is enabled.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showrowdetailscolumn</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showrowdetailscolumn: false}); </code></pre>
                        <p>
                            Get the <code>showrowdetailscolumn</code> property.
                        </p>
                        <pre><code>var showrowdetailscolumn = $('#jqxGrid').jqxGrid('showrowdetailscolumn'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/R7UYj/">showrowdetailscolumn is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span32'>showheader</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows or hides the columns header.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showheader</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showheader: false}); </code></pre>
                        <p>
                            Get the <code>showheader</code> property.
                        </p>
                        <pre><code>var showheader = $('#jqxGrid').jqxGrid('showheader'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9RnXk/">showheader is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span33'>showgroupsheader</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            Shows or hides the groups header area.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showgroupsheader</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showgroupsheader: true}); </code></pre>
                        <p>
                            Get the <code>showgroupsheader</code> property.
                        </p>
                        <pre><code>var showgroupsheader = $('#jqxGrid').jqxGrid('showgroupsheader'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uFSMD/">showgroupsheader is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span87'>showaggregates</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.aggregates.js)</p>
                        <p>
                            Shows or hides the aggregates in the grid's statusbar.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showaggregates</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showaggregates: true}); </code></pre>
                        <p>
                            Get the <code>showaggregates</code> property.
                        </p>
                        <pre><code>var showaggregates = $('#jqxGrid').jqxGrid('showaggregates'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8BE5w/">showaggregates is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>showeverpresentrow</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows or hides an additional row in jqxGrid which allows you to easily add new rows.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showeverpresentrow</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showeverpresentrow: true}); </code></pre>

                        <p>
                            Get the <code>showeverpresentrow</code> property.
                        </p>
                        <pre><code>var showeverpresentrow = $('#jqxGrid').jqxGrid('showeverpresentrow'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xhekgmab/">showeverpresentrow is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span208'>everpresentrowposition</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>'top'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the position of the ever present row. Possible values: "top", "bottom", "topAboveFilterRow".
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>everpresentrowposition</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ everpresentrowposition: 'bottom'}); </code></pre>

                        <p>
                            Get the <code>everpresentrowposition</code> property.
                        </p>
                        <pre><code>var everpresentrowposition = $('#jqxGrid').jqxGrid('everpresentrowposition'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/x7p4dfy5/">everpresentrowposition is set to 'bottom'</a>
                        </div>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span220'>everpresentrowheight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>30
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the height of the ever present row.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>everpresentrowheight</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ everpresentrowheight: 35}); </code></pre>

                        <p>
                            Get the <code>everpresentrowheight</code> property.
                        </p>
                        <pre><code>var everpresentrowheight = $('#jqxGrid').jqxGrid('everpresentrowheight'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c3jsogjs/">everpresentrowheight is set to 35</a>
                        </div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span221'>everpresentrowactions</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>"add reset"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the actions of the ever present row. Possible values: "add", "reset", "update", "delete".
                            Instead of "add", you can also use "addBottom" which is the same as "add", but adds the new row to the bottom of the Grid.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>everpresentrowactions</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ everpresentrowactions: "add update delete reset"}); </code></pre>

                        <p>
                            Get the <code>everpresentrowactions</code> property.
                        </p>
                        <pre><code>var everpresentrowactions = $('#jqxGrid').jqxGrid('everpresentrowactions'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vkLvyn69/">everpresentrowactions is set to "add update delete reset"</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span222'>everpresentrowactionsmode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>"popup"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the actions display mode. By default they are displayed in a popup. You can set the property to "columns" and define columns with datafields - addButtonColumn, resetButtonColumn, updateButtonColumn and deleteButtonColumn to display the actions in columns.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>everpresentrowactionsmode</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ everpresentrowactionsmode: "add update delete reset"}); </code></pre>

                        <p>
                            Get the <code>everpresentrowactionsmode</code> property.
                        </p>
                        <pre><code>var everpresentrowactionsmode = $('#jqxGrid').jqxGrid('everpresentrowactionsmode'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/0dmvm9vj/">everpresentrowactionsmode is set to "columns"</a>
                        </div>
                    </div>
                </td>
            </tr>
        <tr>
                <td class="documentation-option-type-click">
                    <span id='Span223'>columnmenuopening</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>columnmenuopening</code> property.
                        </p>
                        <pre><code>
                        $('#jqxGrid').jqxGrid({ columnmenuopening: function (menu, datafield, height) {
                            var column = $("#jqxgrid").jqxGrid('getcolumn', datafield);
                            if (column.filtertype === "custom") {
                                menu.height(155);
                            }
                            else menu.height(height);
                         }}); 
                         </code></pre>
                        <p>
                            Get the <code>columnmenuopening</code> property.
                        </p>
                        <pre><code>var columnmenuopening = $('#jqxGrid').jqxGrid('columnmenuopening'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zhprkz7s/">columnmenuopening is set to custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span224'>columnmenuclosing</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>columnmenuclosing</code> property.
                        </p>
                        <pre><code>
                        $('#jqxGrid').jqxGrid({ columnmenuclosing: function (menu, datafield, height) {
                       
                         }}); 
                         </code></pre>
                        <p>
                            Get the <code>columnmenuclosing</code> property.
                        </p>
                        <pre><code>var columnmenuclosing = $('#jqxGrid').jqxGrid('columnmenuclosing'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zhprkz7s/">columnmenuclosing is set to custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span227'>cellhover</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback called when a cell is hovered.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>cellhover</code> property.
                        </p>
                        <pre><code>
                        $('#jqxGrid').jqxGrid({ cellhover: function (cellhtmlElement, x, y) {
                       
                         }}); 
                         </code></pre>
                        <p>
                            Get the <code>cellhover</code> property.
                        </p>
                        <pre><code>var cellhover = $('#jqxGrid').jqxGrid('cellhover'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tguhan39/">cellhover is set to custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span103'>showfilterrow</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.filter.js)</p>
                        <p>
                            Shows or hides the filter row.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>showfilterrow</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ showfilterrow: true}); </code></pre>

                        <p>
                            Get the <code>showfilterrow</code> property.
                        </p>
                        <pre><code>var showfilterrow = $('#jqxGrid').jqxGrid('showfilterrow'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RsV5g/">showfilterrow is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span81'>filterrowheight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>31
                </td>
            </tr>
               <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the filter row's height.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Initialize a Grid with the <code>filterrowheight</code> property specified.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ filterrowheight: 30}); </code></pre>
                            <p>
                                Get the <code>filterrowheight</code> property.
                            </p>
                            <pre><code>var filterrowheight = $('#jqxGrid').jqxGrid('filterrowheight'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Td3Qn/">filterrowheight is set to 35</a>
                            </div>
                        </div>
                    </td>
                </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span219'>filtermode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>"default"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.filter.js)</p>
                        <p>
                            The property specifies the type of rendering of the Filter Menu. Possible values: "default" and "excel". In "excel" mode, the Filter Menu displays a ListBox with Checkboxes with all unique cell values.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>filtermode</code> property.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid({ filtermode: 'excel'}); </code></pre>
                        <p>
                            Get the <code>filtermode</code> property.
                        </p>
                        <pre><code>var filtermode = $('#jqxGrid').jqxGrid('filtermode'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LYLvA/">filtermode is set to 'excel'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span145'>showemptyrow</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Shows or hides the empty row label when the Grid has no records to display.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>showemptyrow</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ showemptyrow: false}); </code></pre>
                            <p>
                                Get the <code>showemptyrow</code> property.
                            </p>
                            <pre><code>var showemptyrow = $('#jqxGrid').jqxGrid('showemptyrow'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Lu3EF/">showemptyrow is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span91'>showstatusbar</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Shows or hides the grid's statusbar.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>showstatusbar</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ showstatusbar: true}); </code></pre>
                            <p>
                                Get the <code>showstatusbar</code> property.
                            </p>
                            <pre><code>var showstatusbar = $('#jqxGrid').jqxGrid('showstatusbar'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zu4b7/">showstatusbar is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span97'>statusbarheight</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>34
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the statusbar's height.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>statusbarheight</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ statusbarheight: 40}); </code></pre>
                            <p>
                                Get the <code>statusbarheight</code> property.
                            </p>
                            <pre><code>var statusbarheight = $('#jqxGrid').jqxGrid('statusbarheight'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MsBb9/">statusbarheight is set to 50</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span93'>showtoolbar</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Shows or hides the grid's toolbar.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>showtoolbar</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ showtoolbar: true}); </code></pre>
                            <p>
                                Get the <code>showtoolbar</code> property.
                            </p>
                            <pre><code>var showtoolbar = $('#jqxGrid').jqxGrid('showtoolbar'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Zq25G/">showtoolbar is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span96'>toolbarheight</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>34
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the toolbar's height.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>toolbarheight</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ toolbarheight: 40}); </code></pre>
                            <p>
                                Get the <code>toolbarheight</code> property.
                            </p>
                            <pre><code>var toolbarheight = $('#jqxGrid').jqxGrid('toolbarheight'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Bbm33/">toolbarheight is set to 40</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span46'>selectionmode</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>'singlerow'
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.selection.js)</p>
                            <p>
                                Sets or gets the selection mode.
                            </p>
                            <b>Possible Values:</b>
                            <br />
                            <pre><code>'none'-disables the selection</code></pre>
                            <pre><code>'singlerow'- full row selection</code></pre>
                            <pre><code>'multiplerows' - each click selects a new row. Click on a selected row unselects it</code></pre>
                            <pre><code>'multiplerowsextended' - multiple rows selection with drag and drop. The selection behavior resembles the selection of icons on your desktop</code></pre>
                            <pre><code>'singlecell' - single cell selection</code></pre>
                            <pre><code>'multiplecells' - each click selects a new cell. Click on a selected cell unselects it</code></pre>
                            <pre><code>'multiplecellsextended' - in this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of icons on your desktop</code></pre>
                            <pre><code>'multiplecellsadvanced' - this mode is the most advanced cells selection mode. In this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of cells in a spreadsheet</code></pre>
                            <pre><code>'checkbox' - multiple rows selection through a checkbox.</code></pre>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>selectionmode</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ selectionmode: 'none'}); </code></pre>
                            <p>
                                Get the <code>selectionmode</code> property.
                            </p>
                            <pre><code>var selectionmode = $('#jqxGrid').jqxGrid('selectionmode'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZAkyj/">selectionmode is set to a custom string</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th>Layout
                    </th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th>Name
                    </th>
                    <th>Type
                    </th>
                    <th>Default
                    </th>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span3'>height</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>400
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the Grid's height.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>height</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ height: 250 }); </code></pre>
                            <p>
                                Get the <code>height</code> property.
                            </p>
                            <pre><code>var height = $('#jqxGrid').jqxGrid('height'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/35kU5/">height is set to 300</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span134'>width</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>600
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the Grid's width.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>width</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ width: 250 }); </code></pre>
                            <p>
                                Get the <code>width</code> property.
                            </p>
                            <pre><code>var width = $('#jqxGrid').jqxGrid('width'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/C3vQb/">width is set to 670</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span4'>pagerheight</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>28
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.pager.js)</p>
                            <p>
                                Sets or gets the height of the Grid Pager.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>pagerheight</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ pagerheight: 30}); </code></pre>
                            <p>
                                Get the <code>pagerheight</code> property.
                            </p>
                            <pre><code>var pagerheight = $('#jqxGrid').jqxGrid('pagerheight'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/f2wZu/">pagerheight is set to 30</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span2'>groupsheaderheight</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>34
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.grouping.js)</p>
                            <p>
                                Sets or gets the height of the Grid Groups Header.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>groupsheaderheight</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ groupsheaderheight: 40}); </code></pre>
                            <p>
                                Get the <code>groupsheaderheight</code> property.
                            </p>
                            <pre><code>var groupsheaderheight = $('#jqxGrid').jqxGrid('groupsheaderheight'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FrwX2/">groupsheaderheight is set to 40</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span7'>rowsheight</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>25
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the height of the grid rows.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>rowsheight</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ rowsheight: 20}); </code></pre>
                            <p>
                                Get the <code>rowsheight</code> property.
                            </p>
                            <pre><code>var rowsheight = $('#jqxGrid').jqxGrid('rowsheight'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ayTST/">rowsheight is set to 30</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span8'>columnsheight</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>25
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the columns height.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Initialize a Grid with the <code>columnsheight</code> property specified.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ columnsheight: 30}); </code></pre>
                            <p>
                                Get the <code>columnsheight</code> property.
                            </p>
                            <pre><code>var columnsheight = $('#jqxGrid').jqxGrid('columnsheight'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LspfG/">columnsheight is set to 30</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span9'>groupindentwidth</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>20
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.grouping.js)</p>
                            <p>
                                Sets or gets the group indent size. This size is used when the grid is grouped. This is the size of the columns with expand/collapse toggle buttons.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>groupindentwidth</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ groupindentwidth: 30}); </code></pre>
                            <p>
                                Get the <code>groupindentwidth</code> property.
                            </p>
                            <pre><code>var groupindentwidth = $('#jqxGrid').jqxGrid('groupindentwidth'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zckSX/">groupindentwidth is set to 40</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span31'>autoheight</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the height of the grid to be equal to the summary height of the grid rows. This option should be set when the Grid is in paging mode.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>autoheight</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ autoheight: true}); </code></pre>
                            <p>
                                Get the <code>autoheight</code> property.
                            </p>
                            <pre><code>var autoheight = $('#jqxGrid').jqxGrid('autoheight'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cBeq7/">autoheight is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span204'>autorowheight</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This property works along with the "autoheight" property. When it is set to true, the height of the Grid rows is dynamically changed depending on the cell values.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>autorowheight</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ autorowheight: true}); </code></pre>
                            <p>
                                Get the <code>autorowheight</code> property.
                            </p>
                            <pre><code>var autorowheight = $('#jqxGrid').jqxGrid('autorowheight'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QheNZ/">autorowheight is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span35'>scrollbarsize</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>15
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the scrollbars size.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>scrollbarsize</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ scrollbarsize: 17}); </code></pre>
                            <p>
                                Get the <code>scrollbarsize</code> property.
                            </p>
                            <pre><code>var scrollbarsize = $('#jqxGrid').jqxGrid('scrollbarsize'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mtY3V/">scrollbarsize is set to 20</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span205'>scrollmode</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>"default"
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Determines the scrolling mode.
                            </p>
                            <b>Possible Values:</b>
                            <br />
                            <pre><code>'default'</code></pre>
                            <pre><code>'logical'- the movement of the scrollbar thumb is by row, not by pixel</code></pre>
                            <pre><code>'deferred'-content is stationary when the user drags the Thumb of a ScrollBar</code></pre>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>scrollmode</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ scrollmode: 'logical'}); </code></pre>
                            <p>
                                Get the <code>scrollmode</code> property.
                            </p>
                            <pre><code>var scrollmode = $('#jqxGrid').jqxGrid('scrollmode'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VDunt/">scrollmode is set to 'logical'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span206'>deferreddatafields</span>
                    </td>
                    <td>
                        <span>Array</span>
                    </td>
                    <td>[]
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Determines the cell values displayed in a tooltip next to the scrollbar when the "scrollmode" is set to "deferred".
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>deferreddatafields</code> property .
                            </p>
                            <pre><code>
$("#jqxGrid").jqxGrid(
{
    source: adapter,
    scrollmode: 'deferred',
    deferreddatafields: ['firstname', 'lastname', 'productname'],
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 100 },
        { text: 'Last Name', datafield: 'lastname', width: 100 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', width: 80, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
    ]
});
                        </code></pre>
                            <p>
                                Get the <code>deferreddatafields</code> property.
                            </p>
                            <pre><code>var deferreddatafields = $('#jqxGrid').jqxGrid('deferreddatafields'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/B2Gma/">deferreddatafields is set to ['firstname', 'lastname', 'productname']</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span80'>scrollfeedback</span>
                    </td>
                    <td>
                        <span>function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            When the "scrollmode" is set to "deferred", the "scrollfeedback" function may be used to display custom UI Tooltip next to the scrollbar.
                          <h4>Code example</h4>
                            <p>
                                Set the <code>scrollfeedback</code> function.
                            </p>
                            <pre style='width: 700px; max-width: 700px; margin: 10px;' class='code'>$(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#jqxgrid"</span>).jqxGrid(<div/>{<div/>    source: dataAdapter,<div/>    altrows: true,<div/>    sortable: true,<div/>    scrollmode: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'deferred'</span>,<div/>    scrollfeedback: function(row)<div/>    {<div/>        return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;table style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"height: 150px;"&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;img src="../../images/t-shirts/' + row.pic + '"</span>/&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;td&gt;</span>' + row.label + '<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/td&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/tr&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/table&gt;</span>'</span>;<div/>    },<div/>    rowsheight: 115,<div/>    columns: [<div/>        {<div/>            text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Image', datafield: 'pic'</span>, width: 115, cellsrenderer: function (row, column, value) {<div/>                return <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;img src=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"../../images/t-shirts/' + value + '"</span>/&gt;</span>'</span>;<div/>            }<div/>        },<div/>        {<div/>            text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Title', datafield: 'label'</span>, width: 250<div/>        },<div/>        {<div/>            text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Price', cellsformat: 'c2', datafield: 'price'</span><div/>        }<div/>    ]<div/>});<div/></pre>
                            <p>
                                Get the <code>scrollfeedback</code> function.
                            </p>
                            <pre><code>var scrollfeedback = $('#jqxGrid').jqxGrid('scrollfeedback'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DuPX3/">scrollfeedback is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th>Behavior
                    </th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th>Name
                    </th>
                    <th>Type
                    </th>
                    <th>Default
                    </th>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span1'>disabled</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Enables or disables the Grid's plugin.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>disabled</code> property.
                            </p>
                            <pre><code>$("#jqxGrid").jqxGrid({ disabled: true});</code></pre>
                            <p>
                                Get the <code>disabled</code> property.
                            </p>
                            <pre><code>var disabled = $('#jqxGrid').jqxGrid('disabled'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NaWDx/">disabled is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span165'>verticalscrollbarstep</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>5
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the scrollbar's step when the user clicks the scroll arrows.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>verticalscrollbarstep</code> property.
                            </p>
                            <pre><code>$("#jqxGrid").jqxGrid({ verticalscrollbarstep: 15});</code></pre>
                            <p>
                                Get the <code>verticalscrollbarstep</code> property.
                            </p>
                            <pre><code>var verticalscrollbarstep = $('#jqxGrid').jqxGrid('verticalscrollbarstep'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QfC4f/">verticalscrollbarstep is set to 20</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span166'>verticalscrollbarlargestep</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>400
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the scrollbar's large step. This property specifies the step with which the vertical scrollbar's
                            value is changed when the user clicks the area above or below the thumb.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>verticalscrollbarlargestep</code> property.
                            </p>
                            <pre><code>$("#jqxGrid").jqxGrid({ verticalscrollbarlargestep: 50});</code></pre>
                            <p>
                                Get the <code>verticalscrollbarlargestep</code> property.
                            </p>
                            <pre><code>var verticalscrollbarlargestep = $('#jqxGrid').jqxGrid('verticalscrollbarlargestep'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j3gqj/">verticalscrollbarlargestep is set to 600</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span167'>horizontalscrollbarstep</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>5
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the scrollbar's step when the user clicks the scroll arrows.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>horizontalscrollbarstep</code> property.
                            </p>
                            <pre><code>$("#jqxGrid").jqxGrid({ horizontalscrollbarstep: 15});</code></pre>
                            <p>
                                Get the <code>horizontalscrollbarstep</code> property.
                            </p>
                            <pre><code>var horizontalscrollbarstep = $('#jqxGrid').jqxGrid('horizontalscrollbarstep'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EgVy7/">horizontalscrollbarstep is set to 60</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span168'>horizontalscrollbarlargestep</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>50
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the scrollbar's large step. This property specifies the step with which the horizontal scrollbar's
                            value is changed when the user clicks the area above or below the thumb.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>horizontalscrollbarlargestep</code> property.
                            </p>
                            <pre><code>$("#jqxGrid").jqxGrid({ horizontalscrollbarlargestep: 50});</code></pre>
                            <p>
                                Get the <code>horizontalscrollbarlargestep</code> property.
                            </p>
                            <pre><code>var horizontalscrollbarlargestep = $('#jqxGrid').jqxGrid('horizontalscrollbarlargestep'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/srGsL/">horizontalscrollbarlargestep is set to 600</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span169'>keyboardnavigation</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.selection.js)</p>
                            <p>
                                Enables or disables the keyboard navigation.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>keyboardnavigation</code> property.
                            </p>
                            <pre><code>$("#jqxGrid").jqxGrid({ keyboardnavigation: false});</code></pre>
                            <p>
                                Get the <code>keyboardnavigation</code> property.
                            </p>
                            <pre><code>var keyboardnavigation = $('#jqxGrid').jqxGrid('keyboardnavigation'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ftGjN/">keyboardnavigation is set to false</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span192'>autosavestate</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.storage.js)</p>
                            <p>
                                Determines whether the Grid automatically saves its current state. 
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>autosavestate</code> property.
                            </p>
                            <pre><code>$("#jqxGrid").jqxGrid({ autosavestate: true});</code></pre>
                            <p>
                                Get the <code>autosavestate</code> property.
                            </p>
                            <pre><code>var autosavestate = $('#jqxGrid').jqxGrid('autosavestate'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dnBPG/">autosavestate is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span193'>autoloadstate</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.storage.js)</p>
                            <p>
                                Determines whether the Grid automatically loads its current state(if there's already saved one). The Grid's state is loaded when the page is refreshed.  
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>autoloadstate</code> property.
                            </p>
                            <pre><code>$("#jqxGrid").jqxGrid({ autoloadstate: true});</code></pre>
                            <p>
                                Get the <code>autoloadstate</code> property.
                            </p>
                            <pre><code>var autoloadstate = $('#jqxGrid').jqxGrid('autoloadstate'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MuN7j/">autoloadstate is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span5'>pagesize</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>10
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.pager.js)</p>
                            <p>
                                Sets or gets the number of visible rows per page when the Grid paging is enabled.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>pagesize</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ pagesize: 20}); </code></pre>
                            <p>
                                Get the <code>pagesize</code> property.
                            </p>
                            <pre><code>var pagesize = $('#jqxGrid').jqxGrid('pagesize'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kQQqa/">pagesize is set to 30</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span6'>pagesizeoptions</span>
                    </td>
                    <td>
                        <span>Array</span>
                    </td>
                    <td>['5', '10', '20']
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.pager.js)</p>
                            <p>
                                Sets or gets the available page size options.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>pagesizeoptions</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ pagesizeoptions: ['10', '20', '30']}); </code></pre>
                            <p>
                                Get the <code>pagesizeoptions</code> property.
                            </p>
                            <pre><code>var pagesizeoptions = $('#jqxGrid').jqxGrid('pagesizeoptions'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Hz8GS/">pagesizeoptions is set to ['10', '20', '30']</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span217'>pagermode</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>"default"
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.pager.js)</p>
                            <p>
                                Sets or gets the rendering mode of the pager. Available values - "simple" and "default".
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>pagermode</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ pagermode: "simple"}); </code></pre>
                            <p>
                                Get the <code>pagermode</code> property.
                            </p>
                            <pre><code>var pagermode = $('#jqxGrid').jqxGrid('pagermode'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bqC8C/">pagermode is set to "simple"</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span218'>pagerbuttonscount</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>5
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.pager.js)</p>
                            <p>
                                Sets or gets the buttons displayed in the pager when the "pagermode" is set to "simple".
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>pagerbuttonscount</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ pagerbuttonscount: 3}); </code></pre>
                            <p>
                                Get the <code>pagerbuttonscount</code> property.
                            </p>
                            <pre><code>var pagerbuttonscount = $('#jqxGrid').jqxGrid('pagerbuttonscount'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wdBwt/">pagerbuttonscount is set to 10</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span10'>rowdetails</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Enables or disables the row details. When this option is enabled, the Grid can show additional information below each grid row.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>rowdetails</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ rowdetails: true}); </code></pre>
                            <p>
                                Get the <code>rowdetails</code> property.
                            </p>
                            <pre><code>var rowdetails = $('#jqxGrid').jqxGrid('rowdetails'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/A59WK/">rowdetails is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span12'>initrowdetails</span>
                    </td>
                    <td>
                        <span>function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This function is called when the user expands the row details and the details are going to be rendered.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set  the <code>initrowdetails</code> function.
                            </p>
                            <pre><code>
                        var initrowdetails = function (index) {
                            // your row details initialization code here. The index is the index of the expanded row with details.
                        }
                        $('#jqxGrid').jqxGrid({ initrowdetails: initrowdetails}); </code></pre>
                            <p>
                                Get the <code>initrowdetails</code> function.
                            </p>
                            <pre><code>var initrowdetails = $('#jqxGrid').jqxGrid('initrowdetails'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bHR3b/">initrowdetails is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span160'>rowdetailstemplate</span>
                    </td>
                    <td>
                        <span>Object</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Determines the template of the row details. The rowdetails field specifies the HTML used for details. The rowdetailsheight specifies the height of the details.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>rowdetailstemplate</code> property. 
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ rowdetailstemplate: { rowdetails: "<pre style='margin: 10px;' class='code'><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;ul style='margin-left: 30px;'&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;li class='title'&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/li&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;li&gt;</span>Notes<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/li&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/ul&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div class='information'&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;div class='notes'</span>&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;/div&gt;</span><div/></pre>", rowdetailsheight: 200 }); </code></pre>
                            <p>
                                Get the <code>rowdetailstemplate</code> property.
                            </p>
                            <pre><code>var rowdetailstemplate = $('#jqxGrid').jqxGrid('rowdetailstemplate'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jKPLJ/">rowdetailstemplate is set to a custom object</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span138'>ready</span>
                    </td>
                    <td>
                        <span>function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This function is called when the grid is initialized and the binding is complete.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>ready</code>function.
                            </p>
                            <pre><code>
$("#jqxgrid").jqxGrid(
{
    source: source, 
    ready: function()
    {
        $("#jqxGrid").jqxGrid('sortby', 'firstname', 'asc');     
    },
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 100 },
        { text: 'Last Name', datafield: 'lastname', width: 100 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
    ]
});                        
                        </code></pre>
                            <p>
                                Get the <code>ready</code> function.
                            </p>
                            <pre><code>var ready = $('#jqxGrid').jqxGrid('ready'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Xr4LS/">ready is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span13'>pageable</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.pager.js)</p>
                            <p>
                                Enables or disables the Grid Paging feature. When the value of this property is true, 
                            the Grid displays a pager below the rows.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>pageable</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ pageable: true}); </code></pre>
                            <p>
                                Get the <code>pageable</code> property.
                            </p>
                            <pre><code>var pageable = $('#jqxGrid').jqxGrid('pageable'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ugkH2/">pageable is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span139'>filterable</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.filter.js)</p>
                            <p>
                                Enables or disables the Grid Filtering feature. When the value of this property is true, 
                            the Grid displays a filtering panel in the columns popup menus.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>filterable</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ filterable: true}); </code></pre>
                            <p>
                                Get the <code>filterable</code> property.
                            </p>
                            <pre><code>var filterable = $('#jqxGrid').jqxGrid('filterable'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/X68HN/">filterable is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span163'>editable</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.edit.js)</p>
                            <p>
                                The editable property enables or disables the Grid editing feature.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>editable</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ editable: true}); </code></pre>
                            <p>
                                Get the <code>editable</code> property.
                            </p>
                            <pre><code>var editable = $('#jqxGrid').jqxGrid('editable'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tzHXR/">editable is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span164'>editmode</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>'selectedcell'
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.edit.js)</p>
                            <p>
                                The editmode property specifies the action that the end-user should make to open an editor.
                            </p>
                            <b>Possible Values:</b>
                            <br />
                            <pre><code>'click' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value</code></pre>
                            <pre><code>'selectedcell' - Marks the cell as selected. A second click on the selected cell shows the editor. The editor’s value is equal to the cell’s value</code></pre>
                            <pre><code>'selectedrow' - A second click on a selected row shows the row editors.</code></pre>
                            <pre><code>'dblclick' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value</code></pre>
                            <pre><code>'programmatic' - Cell editors are activated and deactivated only through the API(see begincelledit and endcelledit methods)</code></pre>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>editmode</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ editmode: 'click'}); </code></pre>
                            <p>
                                Get the <code>editmode</code> property.
                            </p>
                            <pre><code>var editmode = $('#jqxGrid').jqxGrid('editmode'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5aGqc/">editmode is set to 'dblclick'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span15'>sortable</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.sort.js)</p>
                            <p>
                                The sortable property enables or disables the sorting feature.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>sortable</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ sortable: true}); </code></pre>
                            <p>
                                Get the <code>sortable</code> property.
                            </p>
                            <pre><code>var sortable = $('#jqxGrid').jqxGrid('sortable'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gwQrY/">sortable is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span14'>groupable</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.grouping.js)</p>
                            <p>
                                This property enables or disables the grouping feature.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>groupable</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ groupable: true}); </code></pre>
                            <p>
                                Get the <code>groupable</code> property.
                            </p>
                            <pre><code>var groupable = $('#jqxGrid').jqxGrid('groupable'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HVuGf/">groupable is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span20'>groups</span>
                    </td>
                    <td>
                        <span>Array</span>
                    </td>
                    <td>[]
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.grouping.js)</p>
                            <p>
                                Sets or gets the Grid groups when the Grouping feature is enabled.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>groups</code> property.
                            </p>
                            <pre><code>          
$("#jqxGrid").jqxGrid(
{
    source: source,
    columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry' }
    ],
    groupable: true,
    groups: ['ShipCity']
});
            </code></pre>
                            <p>
                                Get the <code>groups</code> property.
                            </p>
                            <pre><code>var groups = $('#jqxGrid').jqxGrid('groups'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rVT4R/">groups is set to ['firstname']</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span25'>columns</span>
                    </td>
                    <td>
                        <span>Array</span>
                    </td>
                    <td>[]
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the Grid columns.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>columns</code> property.
                            </p>
                            <pre><code>
$("#jqxGrid").jqxGrid(
{
    source: source,
    columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
        { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
        { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
    ]
});                        
                        </code></pre>
                            <br />
                            Column Properties:

                            <ul>
                                <li>text - sets the column text.</li>
                                <li>datafield - sets the column datafield.</li>
                                <li>displayfield - sets the column's displayfield. The displayfield specifies the field in the data source from which the column to retrieve strings for display.</li>
                                <li>sortable - enables or disables the sorting.</li>
                                <li>filterable - enables or disables the filtering.</li>
								<li>filter - sets the column's initialization filter. A $.jqx.filter object is expected.</li>
                                <li>hideable - enables or disables whether the column can be hidden.</li>
                                <li>hidden - hides or shows the column.</li>
                                <li>groupable - sets whether the user can group by this column.</li>
                                <li>menu - sets whether the menu button is displayed when the user moves the mouse cursor over the column's header.</li>
                                <li>exportable - determines whether the column will be exported when the Grid's export method is called.</li>
                                <li>columngroup - determines the name of the column's parent group.</li>
                                <li>enabletooltips - determines whether tooltips are enabled.</li>
                                <li>renderer - sets a custom column renderer. This can be used for changing the built-in rendering of the column's header.</li>
                                <li>rendered - callback function that is called when the column is rendered. You can use it to set additional settings to the column's header element.
    <pre><code>
      rendered: function (columnHeaderElement) {
          // Your code here.                   
        }
    </code></pre>
                                </li>
                                <li>cellsrenderer - sets a custom rendering function. The cellsrenderer function is called when a cell in the column is rendered. You can use it to override the built-in cells rendering. The cellsRenderer function has 6 parameters passed by jqxGrid - row index, data field, cell value, defaultHtml string that is rendered by the grid, column's settings and the entire row's data as JSON object.
                                    <pre><code>
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
      cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }   
}
</code></pre>
                                </li>
                                <li>columntype - sets the column's type.<br />
                                    Possible values:
        <ul>
            <li>'number' - readonly column with numbers.</li>
            <li>'checkbox' - readonly checkbox when the editing is disabled. Checkbox input when editing is enabled.
               <ul>
                   <li>threestatecheckbox - determines whether the checkbox has an indeterminate state when the value is null. The default value is false.</li>
               </ul>
            </li>
            <li>'numberinput' - sets a number input editor as a default editor for the column. Requires: jqxnumberinput.js </li>
            <li>'dropdownlist' - sets a dropdownlist editor as a default editor for the column. Requires: jqxlistbox.js and jqxdropdownlist.js </li>
            <li>'combobox' - sets a combobox editor as a default editor for the column. Requires: jqxlistbox.js and jqxcombobox.js </li>
            <li>'datetimeinput' - sets a datetimeinput editor as a default editor for the column. Requires: jquery.global.js, jqxcalendar.js and jqxdatetimeinput.js </li>
            <li>'textbox' - sets a textbox editor as a default editor for the column.</li>
            <li>'template' - sets a custom editor as a default editor for the column. The editor should be created in the "createeditor" callback. The editor should be synchronized with the cell's value in the "initeditor" callback. The editor's value should be retrieved in the "geteditorvalue" callback.</li>
            <li>'custom' - sets a custom editor as a default editor for a cell. That setting enables you to have multiple editors in a Grid column. The editors should be created in the "createeditor" callback - it is called for each row when the "columntype=custom". The editors should be synchronized with the cell's value in the "initeditor" callback. The editor's value should be retrieved in the "geteditorvalue" callback.</li>
        </ul>
                                </li>
                                <li>validation - sets a custom validation function. The Grid passes 2 parameters to it - edit cell and the cell's value. The function should return
    true or false, depending on the user's validation logic. It can also return a validation object with 2 fields - "result" - true or false, and "message" - validation string displayed to the users.
                                    <pre><code>
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
    validation: function (cell, value) {
        if (value < 0 || value > 150) {
            return { result: false, message: "Quantity should be in the 0-150 interval" };
        }
        return true;
    }
}
</code></pre>
                                </li>
                                <li>createfilterwidget - sets a custom function which is called when a widget from the filter row is created. You can use this callback function to set up additional settings of the filter widget.
        The Grid passes 3 parameters to it - column, the column's HTML element and the filter widget.
                                    <pre><code>
{
    text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220,
    createfilterwidget: function (column, columnElement, widget) {
        widget.jqxDropDownList({ dropDownWidth: 250 });
    }
},
</code></pre>
                                </li>
                                <li>createfilterpanel - sets a custom function for overriding the Grid's Filter Menu. The column's filtertype should be set to "custom" in order to use that option. The grid passes the column's field and filter panel as parameters.
                                    <pre><code>
var buildFilterPanel = function (filterPanel, datafield) {
    var textInput = $("&lt;input style='margin:5px;'/&gt;");
    var applyinput = $("&lt;div class='filter' style='height: 25px; margin-left: 20px; margin-top: 7px;'>&lt;/div&gt;");
    var filterbutton = $('&lt;span tabindex="0" style="padding: 4px 12px; margin-left: 2px;">Filter&lt;/span&gt;');
    applyinput.append(filterbutton);
    var filterclearbutton = $('&lt;span tabindex="0" style="padding: 4px 12px; margin-left: 5px;">Clear&lt;/span&gt;');
    applyinput.append(filterclearbutton);

    filterPanel.append(textInput);
    filterPanel.append(applyinput);
    filterbutton.jqxButton({ theme: exampleTheme, height: 20 });
    filterclearbutton.jqxButton({ theme: exampleTheme, height: 20 });

    var dataSource =
    {
        localdata: adapter.records,
        datatype: "array",
        async: false
    }
    var dataadapter = new $.jqx.dataAdapter(dataSource,
    {
        autoBind: false,
        autoSort: true,
        autoSortField: datafield,
        async: false,
        uniqueDataFields: [datafield]
    });
    textInput.jqxInput({ theme: exampleTheme, placeHolder: "Enter Last Name", popupZIndex: 9999999, displayMember: 'lastname', source: dataadapter, height: 23, width: 175 });
    filterbutton.click(function () {
        var filtergroup = new $.jqx.filter();

        var filter_or_operator = 1;
        var filtervalue = textInput.val();
        var filtercondition = 'contains';
        var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);            
        filtergroup.addfilter(filter_or_operator, filter1);
        // add the filters.
        $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
        // apply the filters.
        $("#jqxgrid").jqxGrid('applyfilters');
        $("#jqxgrid").jqxGrid('closemenu');
    });
    filterclearbutton.click(function () {
        $("#jqxgrid").jqxGrid('removefilter', datafield);
        // apply the filters.
        $("#jqxgrid").jqxGrid('applyfilters');
        $("#jqxgrid").jqxGrid('closemenu');
    });
}

$("#jqxgrid").jqxGrid(
{
    width: 850,
    source: adapter,
    filterable: true,
    sortable: true,
    ready: function () {
        addfilter();
    },
    autoshowfiltericon: true,
    columnmenuopening: function (menu, datafield, height) {
        var column = $("#jqxgrid").jqxGrid('getcolumn', datafield);
        if (column.filtertype === "custom") {
            menu.height(155);
        }
        else menu.height(height);
    },
    columns: [
        {
            text: 'First Name', datafield: 'firstname', width: 160,
            filtertype: "custom",
            createfilterpanel: function (datafield, filterPanel) {
                buildFilterPanel(filterPanel, datafield);
            }
        },
        {
            text: 'Last Name', datafield: 'lastname',
            filtertype: "custom",
            createfilterpanel: function (datafield, filterPanel) {
                buildFilterPanel(filterPanel, datafield, );
            },
            width: 160
        },
        { text: 'Product', datafield: 'productname', filtertype: 'checkedlist', width: 170 },
        { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
});
</code></pre>
                                </li>
                                <li>initeditor - sets a custom function which is called when the cells editor is opened. The Grid passes 6 parameters to it - row index, cell value, the editor element, cell's text, the pressed char. The function can be 
   used for adding some custom parameters to the editor. This function is called each time an editor is opened.
                                    <pre><code>
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
    initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
        editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }
}
</code></pre>
                                </li>
                                <li>createeditor - sets a custom function which is called when the cells editor is created. The Grid passes 6 parameters to it - row index, cell value, the editor element, cell's text, cell's width and cell's height. The function can be 
   used for adding some custom parameters to the editor. This function is called only once - when the editor is created.
                                    <pre><code>
{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
    createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
        var dataSource = ['Cappuccino', 'Caramel Latte', 'Caffe Espresso'];
        editor.jqxDropDownList({source: dataSource });
    }
}
</code></pre>
                                </li>
                                <li>destroyeditor - sets a custom function which is called when a custom cell editor is destroyed. The function is called only when the "columntype" property is set to "custom "and "template". In all other cases, jqxGrid automatically destroys the editors. The Grid passes 1 parameter to it - the editor element. If the "columntype" is "custom", the Grid passes the row's bound index as a second parameter.</li>
                                <li>geteditorvalue - gets the editor's value to be displayed in the cell. The function can be used for overriding the value returned by the editor. It is useful for advanced scenarios with custom editors and edit templates. The Grid passes 3 parameters to it - row's bound index index, cell value and the editor element.
        <pre>
            <code>
geteditorvalue: function (row, cellvalue, editor) {
    // return the editor's value.
    return editor.find('input').val();
}
            </code>
        </pre>
                                </li>
                                <li>cellbeginedit - sets a custom function which is called when a cell enters into edit mode. The Grid passes 3 parameters to it - row index, column data field and column type. The function can be 
   used for canceling the editing of a specific Grid cell. To cancel the editing, the function should return false.
                                    <pre><code>
{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
    cellbeginedit: function (row, datafield, columntype) {
        if (row == 2)
            return false;
    }
}
</code></pre>
                                </li>
                                <li>cellendedit - sets a custom function which is called when a cell leaves the edit mode. The Grid passes 5 parameters to it - row index, column data field, column type, old cell value, new cell value. The function can be 
   used for canceling the changes of a specific Grid cell. To cancel the changes, the function should return false.
                                    <pre><code>
{ text: 'Product', datafield: 'productname',
    cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
        if (newvalue == "My Value")
            return false;
    }
}
</code></pre>
                                </li>
                                <li>cellvaluechanging - sets a custom function which is called when a cell's value is going to be changed The Grid passes 5 parameters to it - row index, column data field, column type, old cell value, new cell value. The function can be 
    used for modifying the edited value.
                                    <pre><code>
{
    text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90,
    cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
        return "$" + newvalue;
    }
},

     </code></pre>
                                </li>
                                <li>createeverpresentrowwidget - sets a custom function which is called when a widget in the ever present row(showeverpresentrow should be true) is created. datafield is the column's datafield. htmlElement is the Cell's DIV tag. popup is the popup displayed below the cell. addRowCallback is a function which you can call to trigger the "Add" action.
                                    <pre><code>
{ text: 'Product', datafield: 'productname',
    createEverPresentRowWidget: function (datafield, htmlElement, popup, addRowCallback) {
        var inputTag = $("&lt;input style='border: none;'/&gt;").appendTo(htmlElement);
        inputTag.jqxInput({ popupZIndex: 99999999, placeHolder: "Enter Name: ", source: getSourceAdapter("name"), displayMember: 'name', width: '100%', height: 30 });
        var everpresentrowheight = $("#jqxgrid").jqxGrid('everpresentrowheight');
        inputTag.focus(function () {
            popup.css({ display: 'block', top: inputTag.offset().top + everpresentrowheight - 1, left: inputTag.offset().left });
        });
        inputTag.blur(function () {
            popup.hide();
        });
        return inputTag;
    }
}
</code></pre>
                                </li>
                                <li>initeverpresentrowwidget - sets a custom function which is called when a widget in the ever present row(showeverpresentrow should be true) is being initialized. 
                                    <pre><code>
{ text: 'Product', datafield: 'productname',
    initeverpresentrowwidget: function (datafield, htmlElement, popup) {
    }
}
</code></pre>
                                </li>
                                <li>reseteverpresentrowwidgetvalue - sets a custom function which is called when a widget in the ever present row(showeverpresentrow should be true) should reset its value.
                                    <pre><code>
{ text: 'Product', datafield: 'productname',
    reseteverpresentrowwidgetvalue: function (htmlElement) {
    }
}
</code></pre>
                                </li>
                                <li>geteverpresentrowwidgetvalue - sets a custom function which is called when a widget in the ever present row(showeverpresentrow should be true) should return its value.
                                    <pre><code>
{ text: 'Product', datafield: 'productname',
   getEverPresentRowWidgetValue: function (datafield, htmlElement) {
        var value = htmlElement.val();
        return value;
   },
}
</code></pre>
                                </li>
                                <li>destroyeverpresentrowwidget - sets a custom function which is called when a widget in the ever present row(showeverpresentrow should be true) is destroyed. The function is useful for destroying custom widgets.
                                    <pre><code>
{ text: 'Product', datafield: 'productname',
    destroyeverpresentrowwidget: function (htmlElement) {
    }
}
</code></pre>
                                </li>
                                <li>validateeverpresentrowwidgetvalue - sets a custom function which is called when a widget in the ever present row(showeverpresentrow should be true) should validate its value.
                                    <pre><code>
{text: 'Product', datafield: 'productname', 
validateeverpresentrowwidgetvalue: function (datafield, value. rowValues) {
    if (value.length < 5) {
        return { message: "Value is Short", result: false };
    }
    return true;
}
</code></pre>
                                </li>
                                <li>cellsformat - sets the formatting of the grid cells.<br />
                                    <br />
                                    Possible Number strings:
                                    <br />
                                    "d" - decimal numbers.
                                    <br />
                                    "f" - floating-point numbers.
                                    <br />
                                    "n" - integer numbers.
                                    <br />
                                    "c" - currency numbers.
                                    <br />
                                    "p" - percentage numbers.
                                    <br />
                                    <br />
                                    For adding decimal places to the numbers, add a number after the formatting string.
                                    <br />
                                    For example: "c3" displays a number in this format $25.256 
                                    <br />
                                    Possible built-in Date formats:
                                    <br />
                                    <br />
                                    // short date pattern
d: "M/d/yyyy",
                                    <br />
                                    // long date pattern
D: "dddd, MMMM dd, yyyy",
                                    <br />
                                    // short time pattern
t: "h:mm tt",
                                    <br />
                                    // long time pattern
T: "h:mm:ss tt",
                                    <br />
                                    // long date, short time pattern
f: "dddd, MMMM dd, yyyy h:mm tt",
                                    <br />
                                    // long date, long time pattern
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
                                    <br />
                                    // month/day pattern
M: "MMMM dd",
                                    <br />
                                    // month/year pattern
Y: "yyyy MMMM",
                                    <br />
                                    // S is a sortable format that does not vary by culture
S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"
                                    <br />
                                    <br />
                                    Possible Date format strings:
                                    <br />
                                    <br />
                                    "d"-the day of the month;<br />
                                    "dd"-the day of the month;
                                    <br />
                                    "ddd"-the abbreviated name of the day of the week;<br />
                                    "dddd"- the full name of the day of the week;<br />
                                    "h"-the hour, using a 12-hour clock from 1 to 12;
                                    <br />
                                    "hh"-the hour, using a 12-hour clock from 01 to 12;
                                    <br />
                                    "H"-the hour, using a 24-hour clock from 0 to 23;<br />
                                    "HH"- the hour, using a 24-hour clock from 00 to 23;
                                    <br />
                                    "m"-the minute, from 0 through 59;<br />
                                    "mm"-the minutes,from 00 though59;<br />
                                    "M"- the month, from 1 through 12;<br />
                                    "MM"- the month, from 01 through 12;<br />
                                    "MMM"-the abbreviated name of the month;<br />
                                    "MMMM"-the full name of the month;<br />
                                    "s"-the second, from 0 through 59;
                                    <br />
                                    "ss"-the second, from 00 through 59;
                                    <br />
                                    "t"- the first character of the AM/PM designator;<br />
                                    "tt"-the AM/PM designator;
                                    <br />
                                    "y"- the year, from 0 to 99;
                                    <br />
                                    "yy"- the year, from 00 to 99;
                                    <br />
                                    "yyy"-the year, with a minimum of three digits;
                                    <br />
                                    "yyyy"-the year as a four-digit number;
                                    <br />
                                    "yyyyy"-the year as a four-digit number.
                                    <br />
                                </li>
                                <li>aggregates<br />
                                    <br />
                                    <h4>Code Example</h4>
                                    <pre><code>{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }</code></pre>
                                    <br />
                                    Aggregate functions:  
                                <ul>
                                    <li>'avg' - Average aggregate</li>
                                    <li>'count' - Count aggregate</li>
                                    <li>'min' - Min aggregate</li>
                                    <li>'max' - Max aggregate</li>
                                    <li>'sum' - Sum aggregate</li>
                                    <li>'product' - Product aggregate</li>
                                    <li>'stdev' - Standard deviation on a sample.</li>
                                    <li>'stdevp' - Standard deviation on an entire population.</li>
                                    <li>'varp' - Variance on an entire population.</li>
                                    <li>'var' - Variance on a sample.</li>
                                </ul>
                                    <br />
                                    Custom Aggregate<br />
                                    <pre><code>
aggregates: [{ 'In Stock':
    function (aggregatedValue, currentValue) {
        if (currentValue) {
            return aggregatedValue + 1;
        }

        return aggregatedValue;
    }
}
</code></pre>
                                    <br />
                                    Custom Aggregate which aggregates values from two columns
                                    <br />
                                    <pre><code>
{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: [{ '<b>Total</b>':
            function (aggregatedValue, currentValue, column, record) {
                var total = currentValue * parseInt(record['quantity']);
                return aggregatedValue + total;
            }
        }]                  
 }
</code></pre>
                                    <br />
                                    'In Stock' - the aggregate's display name.
The function has 2 params - the aggregated value and the current value. It should return an aggregated value.
                                </li>
                                <li>aggregatesrenderer - sets a custom rendering function of the column's aggregates. The function gets passed one parameter - the column's aggregates.              
                                    <pre><code>
{ text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],
    aggregatesrenderer: function (aggregates) {
        var renderstring = "";
        $.each(aggregates, function (key, value) {
            var name = key == 'min' ? 'Min' : 'Max';
            renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value +'</div>';
        });
        return renderstring;
    }
}
</code></pre>
                                </li>
                                <li>align - sets the column header's alignment to 'left', 'center' or 'right'</li>
                                <li>cellsalign - sets the cells alignment to 'left', 'center' or 'right'.</li>
                                <li>width - sets the column width.</li>
                                <li>minwidth - sets the column's min width.</li>
                                <li>maxwidth - sets the column's max width.</li>
                                <li>resizable - enables or disables the column resizing.</li>
                                <li>draggable - enables or disables the column dragging</li>
                                <li>editable - enables or disables the cells editing</li>
                                <li>classname - sets a custom CSS class for the column's header</li>
                                <li>cellclassname - sets a custom CSS class for the column's cells. The value could be a "String" or "Function".
        <br />
                                    Apply a CSS class to all cells in the column.
        <pre><code>
text: 'Ship Name', datafield: 'ShipName', width: 150, cellclassname: "yellowCell" 
        </code></pre>
                                    <br />
                                    Apply a conditional CSS depending on the cell's value.
        <pre><code>
text: 'Ship Name', datafield: 'ShipName', width: 150,
cellclassname: function (row, column, value, data) {
    if (value == "Hanari Carnes") {
        return "yellowCell";
    }
}
        </code></pre>
                                </li>
                                <li>pinned - pins or unpins the column. If the column is pinned, it will be displayed as frozen and will be visible when the user horizontally scrolls the grid contents.</li>
                                <li>nullable - enables or disables whether null values are allowed.</li>
                                <li>filteritems - sets the items displayed in the list filter - when the "showfilterrow" property value is true and the filter's type is "list" or "checkedlist". The expected value is Array or jqxDataAdapter instance.</li>
                                <li>filterdelay - sets the auto-filter timeout delay for 'text' and 'number' filters in the filter row. Default value: 800</li>
                                <li>filtertype - sets the filter's type.
       <br />
                                    <ul>
                                        <li>'textbox' - basic text field.</li>
                                        <li>'input' - input field with dropdownlist for choosing the filter condition. *Only when "showfilterrow" is true.</li>
                                        <li>'checkedlist' - dropdownlist with checkboxes that specify which records should be visible and hidden.</li>
                                        <li>'list' - dropdownlist which specifies the visible records depending on the selection.</li>
                                        <li>'number' - numeric input field. *Only when "showfilterrow" is true.</li>
                                        <li>'checkbox' - filter for boolean data. *Only when "showfilterrow" is true.</li>
                                        <li>'date' - filter for dates.</li>
                                        <li>'range' - filter for date ranges. *Only when "showfilterrow" is true.</li>
                                        <li>'custom' - allows you to create custom filter menu widgets. *Only when "showfilterrow" is false.</li>
                                    </ul>
                                    <br />
                                    <pre><code>
      $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columnsresize: true,
                showfilterrow: true,
                filterable: true,
                
                selectionmode: 'singlecell',
                columns: [
                  { text: 'Name', columntype: 'textbox', datafield: 'name', width: 120 },
                  { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 160 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 180, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number', width: 50, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', filtertype: 'number', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });    
    </code></pre>
                                </li>
                                <li>filtercondition - determines the filter condition of columns with filtertype equal to 'textbox' or 'number'. 
    // possible conditions for string filter: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
// 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
// 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL'
// possible conditions for numeric filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
                                    <pre><code>
$("#jqxgrid").jqxGrid(
{
    source: dataAdapter,
    showfilterrow: true,
    filterable: true,
    columns: [
        { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 120 },
        { text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 160 },
        { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
        { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 180, cellsalign: 'right', cellsformat: 'd' },
        { text: 'Qty.', datafield: 'quantity', filtertype: 'number', filtercondition: 'equal', width: 50, cellsalign: 'right' },
        { text: 'Price', datafield: 'price', filtertype: 'number', cellsalign: 'right', cellsformat: 'c2' }
    ]
});

     </code></pre>
                                </li>
                            </ul>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ER6hn/">columns is set to a custom array</a>
                            </div>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6X3EZ/">columns is set dynamically</a>
                            </div>



                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span136'>columngroups</span>
                    </td>
                    <td>
                        <span>Array</span>
                    </td>
                    <td>[]
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            The columngroups property enables you to create a Grid with multi column headers. 
                        Possible values for each array entry:
                         <ul>
                             <li>parentgroup - sets the column header's parent group name.</li>
                             <li>name - sets the column header's name.</li>
                             <li>align - sets the column header's alignment to 'left', 'center' or 'right'.</li>
                         </ul>
                            <h4>Code example</h4>
                            <pre><code>
$("#jqxgrid").jqxGrid(
{
    source: dataAdapter,
    pageable: true,
    autorowheight: true,
    altrows: true,
    columnsresize: true,
    columns: [
        { text: 'Supplier Name',  cellsalign: 'center', align: 'center', datafield: 'SupplierName', width: 110 },
        { text: 'Name', columngroup: 'ProductDetails', cellsalign: 'center', align: 'center', datafield: 'ProductName', width: 120 },
        { text: 'Quantity', columngroup: 'ProductDetails', datafield: 'Quantity', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 80 },
        { text: 'Freight', columngroup: 'OrderDetails', datafield: 'Freight', cellsformat: 'd', cellsalign: 'center', align: 'center', width: 100 },
        { text: 'OrderDate', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', cellsformat: 'd', datafield: 'OrderDate', width: 100 },
        { text: 'OrderAddress', columngroup: 'OrderDetails', cellsalign: 'center', align: 'center', datafield: 'OrderAddress', width: 120 },
        { text: 'Price', columngroup: 'ProductDetails', datafield: 'Price', cellsformat: 'c2', align: 'center', cellsalign: 'center', width: 70 },
        { text: 'Address', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'Address', width: 120 },
        { text: 'City', columngroup: 'Location', cellsalign: 'center', align: 'center', datafield: 'City', width: 80 }
    ],
    columngroups: 
    [
        { text: 'Product Details', align: 'center', name: 'ProductDetails' },
        { text: 'Order Details', parentgroup: 'ProductDetails', align: 'center', name: 'OrderDetails' },
        { text: 'Location', align: 'center', name: 'Location' }
    ]
});
</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4NtrR/">columngroups is set to a custom array</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span26'>selectedrowindex</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>-1
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.selection.js)</p>
                            <p>
                                Selects a row at a specified index.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>selectedrowindex</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ selectedrowindex: 1}); </code></pre>
                            <p>
                                Get the <code>selectedrowindex</code> property.
                            </p>
                            <pre><code>var selectedrowindex = $('#jqxGrid').jqxGrid('selectedrowindex'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/97tgw/">selectedrowindex is set to 3</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span28'>selectedrowindexes</span>
                    </td>
                    <td>
                        <span>Array</span>
                    </td>
                    <td>[]
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.selection.js)</p>
                            <p>
                                Selects single or multiple rows.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>selectedrowindexes</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ selectedrowindexes: [0, 1, 2]}); </code></pre>
                            <p>
                                Get the <code>selectedrowindexes</code> property.
                            </p>
                            <pre><code>var selectedrowindexes = $('#jqxGrid').jqxGrid('selectedrowindexes'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dpQ9r/">selectedrowindexes is set to [3,5,10]</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span29'>source</span>
                    </td>
                    <td>
                        <span>Object</span>
                    </td>
                    <td>{}
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxdata.js)</p>
                            <br />
                            The source object represents a set of key/value pairs.
                            <br />
                            url: A string containing the URL to which the request is sent.
                            <br />
                            data: Data to be sent to the server.
                            <br />
                            localdata: data array or data string pointing to a local data source.
                            <br />
                            datatype: the data's type. Possible values: 'xml', 'json', 'jsonp', 'tsv', 'csv', 'local', 'array', 'observablearray'.
                            <br />
                            type: The type of request to make ("POST" or "GET"), default is "GET".
                            <br />
                            id: A string containing the Id data field.
                            <br />
                            root: A string describing where the data begins and all other loops begin from this element.
                            <br />
                            record: A string describing the information for a particular record.
                            <br />
                            <br />

                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>var source =
{
    datatype: &quot;xml&quot;,
    datafields: [
        { name: 'ShippedDate', map: 'm\\:properties&gt;d\\:ShippedDate', type: 'date' },
        { name: 'Freight', map: 'm\\:properties&gt;d\\:Freight', type: 'float' },
        { name: 'ShipName', map: 'm\\:properties&gt;d\\:ShipName' },
        { name: 'ShipAddress', map: 'm\\:properties&gt;d\\:ShipAddress' },
        { name: 'ShipCity', map: 'm\\:properties&gt;d\\:ShipCity' },
        { name: 'ShipCountry', map: 'm\\:properties&gt;d\\:ShipCountry' }
    ],
    root: &quot;entry&quot;,
    record: &quot;content&quot;,
    id: 'm\\:properties&gt;d\\:OrderID',
    url: 'orders.xml'
};
XML
  &lt;entry&gt;
    &lt;id&gt;http://services.odata.org/Northwind/Northwind.svc/Orders(10248)&lt;/id&gt;
    &lt;title type=&quot;text&quot;&gt;&lt;/title&gt;
    &lt;updated&gt;2011-12-01T11:55:06Z&lt;/updated&gt;
    &lt;author&gt;
      &lt;name /&gt;
    &lt;/author&gt;
    &lt;link rel=&quot;edit&quot; title=&quot;Order&quot; href=&quot;Orders(10248)&quot; /&gt;
    &lt;link rel=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/related/Customer&quot; type=&quot;application/atom+xml;type=entry&quot; title=&quot;Customer&quot; href=&quot;Orders(10248)/Customer&quot; /&gt;
    &lt;link rel=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/related/Employee&quot; type=&quot;application/atom+xml;type=entry&quot; title=&quot;Employee&quot; href=&quot;Orders(10248)/Employee&quot; /&gt;
    &lt;link rel=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/related/Order_Details&quot; type=&quot;application/atom+xml;type=feed&quot; title=&quot;Order_Details&quot; href=&quot;Orders(10248)/Order_Details&quot; /&gt;
    &lt;link rel=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/related/Shipper&quot; type=&quot;application/atom+xml;type=entry&quot; title=&quot;Shipper&quot; href=&quot;Orders(10248)/Shipper&quot; /&gt;
    &lt;category term=&quot;NorthwindModel.Order&quot; scheme=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/scheme&quot; /&gt;
    &lt;content type=&quot;application/xml&quot;&gt;
      &lt;m:properties&gt;
        &lt;d:OrderID m:type=&quot;Edm.Int32&quot;&gt;10248&lt;/d:OrderID&gt;
        &lt;d:CustomerID&gt;VINET&lt;/d:CustomerID&gt;
        &lt;d:EmployeeID m:type=&quot;Edm.Int32&quot;&gt;5&lt;/d:EmployeeID&gt;
        &lt;d:OrderDate m:type=&quot;Edm.DateTime&quot;&gt;1996-07-04T00:00:00&lt;/d:OrderDate&gt;
        &lt;d:RequiredDate m:type=&quot;Edm.DateTime&quot;&gt;1996-08-01T00:00:00&lt;/d:RequiredDate&gt;
        &lt;d:ShippedDate m:type=&quot;Edm.DateTime&quot;&gt;1996-07-16T00:00:00&lt;/d:ShippedDate&gt;
        &lt;d:ShipVia m:type=&quot;Edm.Int32&quot;&gt;3&lt;/d:ShipVia&gt;
        &lt;d:Freight m:type=&quot;Edm.Decimal&quot;&gt;32.3800&lt;/d:Freight&gt;
        &lt;d:ShipName&gt;Vins et alcools Chevalier&lt;/d:ShipName&gt;
        &lt;d:ShipAddress&gt;59 rue de l'Abbaye&lt;/d:ShipAddress&gt;
        &lt;d:ShipCity&gt;Reims&lt;/d:ShipCity&gt;
        &lt;d:ShipRegion m:null=&quot;true&quot; /&gt;
        &lt;d:ShipPostalCode&gt;51100&lt;/d:ShipPostalCode&gt;
        &lt;d:ShipCountry&gt;France&lt;/d:ShipCountry&gt;
      &lt;/m:properties&gt;
    &lt;/content&gt;
  &lt;/entry&gt;
  &lt;entry&gt;
    &lt;id&gt;http://services.odata.org/Northwind/Northwind.svc/Orders(10249)&lt;/id&gt;
    &lt;title type=&quot;text&quot;&gt;&lt;/title&gt;
    &lt;updated&gt;2011-12-01T11:55:06Z&lt;/updated&gt;
    &lt;author&gt;
      &lt;name /&gt;
    &lt;/author&gt;
    &lt;link rel=&quot;edit&quot; title=&quot;Order&quot; href=&quot;Orders(10249)&quot; /&gt;
    &lt;link rel=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/related/Customer&quot; type=&quot;application/atom+xml;type=entry&quot; title=&quot;Customer&quot; href=&quot;Orders(10249)/Customer&quot; /&gt;
    &lt;link rel=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/related/Employee&quot; type=&quot;application/atom+xml;type=entry&quot; title=&quot;Employee&quot; href=&quot;Orders(10249)/Employee&quot; /&gt;
    &lt;link rel=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/related/Order_Details&quot; type=&quot;application/atom+xml;type=feed&quot; title=&quot;Order_Details&quot; href=&quot;Orders(10249)/Order_Details&quot; /&gt;
    &lt;link rel=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/related/Shipper&quot; type=&quot;application/atom+xml;type=entry&quot; title=&quot;Shipper&quot; href=&quot;Orders(10249)/Shipper&quot; /&gt;
    &lt;category term=&quot;NorthwindModel.Order&quot; scheme=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/scheme&quot; /&gt;
    &lt;content type=&quot;application/xml&quot;&gt;
      &lt;m:properties&gt;
        &lt;d:OrderID m:type=&quot;Edm.Int32&quot;&gt;10249&lt;/d:OrderID&gt;
        &lt;d:CustomerID&gt;TOMSP&lt;/d:CustomerID&gt;
        &lt;d:EmployeeID m:type=&quot;Edm.Int32&quot;&gt;6&lt;/d:EmployeeID&gt;
        &lt;d:OrderDate m:type=&quot;Edm.DateTime&quot;&gt;1996-07-05T00:00:00&lt;/d:OrderDate&gt;
        &lt;d:RequiredDate m:type=&quot;Edm.DateTime&quot;&gt;1996-08-16T00:00:00&lt;/d:RequiredDate&gt;
        &lt;d:ShippedDate m:type=&quot;Edm.DateTime&quot;&gt;1996-07-10T00:00:00&lt;/d:ShippedDate&gt;
        &lt;d:ShipVia m:type=&quot;Edm.Int32&quot;&gt;1&lt;/d:ShipVia&gt;
        &lt;d:Freight m:type=&quot;Edm.Decimal&quot;&gt;11.6100&lt;/d:Freight&gt;
        &lt;d:ShipName&gt;Toms Spezialit&#228;ten&lt;/d:ShipName&gt;
        &lt;d:ShipAddress&gt;Luisenstr. 48&lt;/d:ShipAddress&gt;
        &lt;d:ShipCity&gt;M&#252;nster&lt;/d:ShipCity&gt;
        &lt;d:ShipRegion m:null=&quot;true&quot; /&gt;
        &lt;d:ShipPostalCode&gt;44087&lt;/d:ShipPostalCode&gt;
        &lt;d:ShipCountry&gt;Germany&lt;/d:ShipCountry&gt;
      &lt;/m:properties&gt;
    &lt;/content&gt;
  &lt;/entry&gt;
</code></pre>
                            <br />
                            datafields: An array describing the fields in a particular record. Each datafield must define the following members:
                            <br />
                            name - A string containing the data field's name.
                            <br />
                            type(optional) - A string containing the data field's type. Possible values: 'string', 'date', 'number', 'bool'.
                            <br />
                            format(optional) - Sets the data formatting. By setting the format, the jqxDataAdapter plug-in will try to format the data before loading it. 
                            <br />
                            Example: { name: 'SubmitDate', type: 'date', format: "yyyy-MM-ddTHH:mm:ss-HH:mm" }
                            <br />
                            map(optional) - A mapping to the data field. 
                            <br />
                            <br />
                            Example with XML data:
                            <br />
                            <br />

                            { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' }  
                            <br />
                            XML
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code> &lt;content type=&quot;application/xml&quot;&gt;
    &lt;m:properties&gt;
      &lt;d:CustomerID&gt;ALFKI&lt;/d:CustomerID&gt;
      &lt;d:CompanyName&gt;Alfreds Futterkiste&lt;/d:CompanyName&gt;
      &lt;d:ContactName&gt;Maria Anders&lt;/d:ContactName&gt;
      &lt;d:ContactTitle&gt;Sales Representative&lt;/d:ContactTitle&gt;
      &lt;d:Address&gt;Obere Str. 57&lt;/d:Address&gt;
      &lt;d:City&gt;Berlin&lt;/d:City&gt;
      &lt;d:Region m:null=&quot;true&quot; /&gt;
      &lt;d:PostalCode&gt;12209&lt;/d:PostalCode&gt;
      &lt;d:Country&gt;Germany&lt;/d:Country&gt;
      &lt;d:Phone&gt;030-0074321&lt;/d:Phone&gt;
      &lt;d:Fax&gt;030-0076545&lt;/d:Fax&gt;
    &lt;/m:properties&gt;
  &lt;/content&gt;
</code></pre>
                            <br />
                            Example with nested JSON data.
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>var data = [{ &quot;empName&quot;: &quot;test&quot;, &quot;age&quot;: &quot;67&quot;, &quot;department&quot;: { &quot;id&quot;: &quot;1234&quot;, &quot;name&quot;: &quot;Sales&quot; }, &quot;author&quot;: &quot;ravi&quot;}];

// prepare the data
var source =
{
    datatype: &quot;json&quot;,
    datafields: [
        { name: 'empName' },
        { name: 'age' },
        { name: 'id', map: 'department&gt;id' },
        { name: 'name', map: 'department&gt;name' },
        { name: 'author' }
    ],
    localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
</code></pre>
                            <br />
                            Example #2 with nested JSON data.
                            <br />
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>var data = [
    {
        &quot;state&quot;: {
            &quot;id&quot;: &quot;x526&quot;,
            &quot;city&quot;: {
                &quot;name&quot;: &quot;Beverly Hills&quot;,
                &quot;id&quot;: 90210,
                &quot;value&quot;: &quot;Beverly Hills&quot;
            }
        }
    }
];

var source = {
    datatype: 'json',
    localdata: data,
    datafields:
    [
        {
            name: 'cityName', map: 'state&gt;city&gt;name'
        }
    ]
};

var dataAdapter = new $.jqx.dataAdapter(source);
</code></pre>
                            <br />
                            <br />
                            id - determines the id of a record in a foreign collection which should match to the record's name in the source collection.
                            <br />
                            text - determines the display field from the foreign collection.
                            <br />
                            source - determines the foreign collection associated to the data field. The expected value is an array.
                            <br />
                            <br />
                            Example with using the id, text and source. This functionality allows you to join two or more data sources.
                            <br />
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>// load records from employees.xml into a dataAdapter.
var employeesSource =
    {
        datatype: &quot;xml&quot;,
        datafields: [
            { name: 'FirstName' },
            { name: 'LastName' }
        ],
        root: &quot;Employees&quot;,
        record: &quot;Employee&quot;,
        id: 'EmployeeID',
        url: &quot;../sampledata/employees.xml&quot;,
        async: false
    };
    // create dataAdapter from the employeesSource object.
    var employeesAdapter = new $.jqx.dataAdapter(employeesSource, {
    autoBind: true,
    beforeLoadComplete: function (records) {
        var data = new Array();
        // update the loaded records. Dynamically add EmployeeName field. 
        for (var i = 0; i &lt; records.length; i++) {
            var employee = records[i];
            employee.EmployeeName = employee.FirstName + &quot; &quot; + employee.LastName;
            data.push(employee);
        }
        return data;
    }
});

// load records from orders.xml into a dataAdapter.
var ordersSource =
{
    datatype: &quot;xml&quot;,
    datafields: [
        // id - determines the id of a record in the foreign collection(employees.xml) which should match to the record's name in the source collection(orders.xml). The 'EmployeeID' from the employees.xml must match to 'EmployeeID' from the orders.xml.
        // text - determines the display field from the foreign collection. We set it to 'EmployeeName' because we want to display the employee names in that column.
        // source - determines the foreign collection. In this scenario, that's the employees data source.
        { name: 'EmployeeID', map: 'm\\:properties&gt;d\\:EmployeeID', text: 'EmployeeName', id: 'EmployeeID', source: employeesAdapter.records },
        { name: 'ShippedDate', map: 'm\\:properties&gt;d\\:ShippedDate', type: 'date' },
        { name: 'Freight', map: 'm\\:properties&gt;d\\:Freight', type: 'float' },
        { name: 'ShipName', map: 'm\\:properties&gt;d\\:ShipName' },
        { name: 'ShipAddress', map: 'm\\:properties&gt;d\\:ShipAddress' },
        { name: 'ShipCity', map: 'm\\:properties&gt;d\\:ShipCity' },
        { name: 'ShipCountry', map: 'm\\:properties&gt;d\\:ShipCountry' }
    ],
    root: &quot;entry&quot;,
    record: &quot;content&quot;,
    id: 'm\\:properties&gt;d\\:OrderID',
    url: &quot;../sampledata/orders.xml&quot;,
    pager: function (pagenum, pagesize, oldpagenum) {
        // callback called when a page or page size is changed.
    }
};
var ordersAdapter = new $.jqx.dataAdapter(ordersSource);
</code></pre>
                            <br />
                            pagenum - determines the initial page number when paging is enabled.
                            <br />
                            pagesize - determines the page size when paging is enabled.
                            <br />
                            pager - callback function called when the current page or page size is changed.
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>pager: function (pagenum, pagesize, oldpagenum) {
}
</code></pre>
                            <br />
                            sortcolumn - determines the initial sort column. The expected value is a data field name.
                            <br />
                            sortdirection - determines the sort order. The expected value is 'asc' for (A to Z) sorting or 'desc' for (Z to A) sorting.
                            <br />
                            sort - callback function called when the sort column or sort order is changed.
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>sort: function (column, direction) {
}
</code></pre>
                            <br />
                            filter - callback function called when a filter is applied or removed.
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>filter: function(filters, recordsArray)
{
}
</code></pre>
                            <br />
                            addrow - callback function, called when a new row is/are added. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids and rows.
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>addrow: function (rowid, rowdata, position, commit) {
    // synchronize with the server - send insert command
    // call commit with parameter true if the synchronization with the server is successful 
    //and with parameter false if the synchronization failed.
    commit(true);
}
</code></pre>
                            <br />
                            deleterow - callback function, called when a row is deleted. If multiple rows are deleted, the rowid parameter is an array of row ids.
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>deleterow: function (rowid, commit) {
    // synchronize with the server - send delete command
    // call commit with parameter true if the synchronization with the server is successful 
    //and with parameter false if the synchronization failed.
    commit(true);
}
</code></pre>
                            <br />
                            updaterow - callback function, called when a row is updated. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids and rows. 
                            <br />
                            Example:
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>updaterow: function (rowid, newdata, commit) {
    // synchronize with the server - send update command
    // call commit with parameter true if the synchronization with the server is successful 
    // and with parameter false if the synchronization failed.
    commit(true);
}
</code></pre>
                            <br />
                            processdata - extend the default data object sent to the server.
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>var source =
{
    datatype: &quot;jsonp&quot;,
    datafields: [
        { name: 'countryName' },
        { name: 'name' },
        { name: 'population', type: 'float' },
        { name: 'continentCode' }
    ],
    url: &quot;http://api.geonames.org/searchJSON&quot;,
    processdata: function (data) {
        data.featureClass = &quot;P&quot;;;
        data.style = &quot;full&quot;;
        data.maxRows = 50;
        data.username = &quot;jqwidgets&quot;;
    }
};
</code></pre>
                            <br />
                            formatdata - Before the data is sent to the server, you can fully override it by using the 'formatdata' function of the source object. The result that the 'formatdata' function returns is actually what will be sent to the server.
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>var source =
{
    datatype: &quot;jsonp&quot;,
    datafields: [
        { name: 'countryName' },
        { name: 'name' },
        { name: 'population', type: 'float' },
        { name: 'continentCode' }
    ],
    url: &quot;http://ws.geonames.org/searchJSON&quot;,
    data: {
        featureClass: &quot;P&quot;,
        style: &quot;full&quot;,
        maxRows: 50
    },
    formatdata: function (data) {
        return &quot;my data&quot;;
    }
};
</code></pre>
                            <br />
                            contenttype: Use this option, If you want to explicitly pass in a content-type. Default is "application/x-www-form-urlencoded".
                            <br />
                            The example code below illustrates how to create jqxDataAdapter from a source object.
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) 
    {
        // data is loaded. 
    },
    loadError: function (xhr, status, error)
    { 
       // data is not loaded.
    }    
});
</code></pre>
                            <br />
                            If you on the Grid to remote data source using asynchronous requests( that is by default when you specify url in the source object and you didn't set the async field to false), then make sure that you call any method or set a property once the data is loaded. To ensure that you call your code when the Grid is loaded with data, use the Grid's ready callback function or on to the 'bindingcomplete' event before the Grid's initialization and call your code inside the event handler. 
                            <br />
                            Example with 'ready' callback:
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>var url = &quot;../sampledata/beverages.txt&quot;;

// prepare the data
var source =
{
    datatype: &quot;json&quot;,
    datafields: [
        { name: 'name' },
        { name: 'type' },
        { name: 'calories', type: 'int' },
        { name: 'totalfat' },
        { name: 'protein' }
    ],
    id: 'id',
    url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(&quot;#jqxgrid&quot;).jqxGrid(
{
    width: 400,
    source: dataAdapter,
    ready: function () {
        $(&quot;#jqxgrid&quot;).jqxGrid('hidecolumn', 'name');
    },
    columnsresize: true,
    columns: [
        { text: 'Name', datafield: 'name', width: 250 },
        { text: 'Beverage Type', datafield: 'type', width: 250 },
        { text: 'Calories', datafield: 'calories', width: 180 },
        { text: 'Total Fat', datafield: 'totalfat', width: 120 },
        { text: 'Protein', datafield: 'protein', minwidth: 120 }
    ]
}); 
</code></pre>
                            <br />
                            Example with 'bindingcomplete':
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>var url = &quot;../sampledata/beverages.txt&quot;;

// prepare the data
var source =
{
    datatype: &quot;json&quot;,
    datafields: [
        { name: 'name' },
        { name: 'type' },
        { name: 'calories', type: 'int' },
        { name: 'totalfat' },
        { name: 'protein' }
    ],
    id: 'id',
    url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(&quot;#jqxgrid&quot;).on('bindingcomplete', function (event) {
    $(&quot;#jqxgrid&quot;).jqxGrid('hidecolumn', 'name');
});

$(&quot;#jqxgrid&quot;).jqxGrid(
{
    width: 400,
    source: dataAdapter,
    columnsresize: true,
    columns: [
        { text: 'Name', datafield: 'name', width: 250 },
        { text: 'Beverage Type', datafield: 'type', width: 250 },
        { text: 'Calories', datafield: 'calories', width: 180 },
        { text: 'Total Fat', datafield: 'totalfat', width: 120 },
        { text: 'Protein', datafield: 'protein', minwidth: 120 }
    ]
});
</code></pre>
                            <br />
                            Initialize a Grid with the source property specified.
                            <br />
                            <br />
                            <b>Bind the Grid to an array</b>
                            <br />
                            <br />
                            The data member is array. The datatype member is set to "array".
                            <br />
                            <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; line-height: 14px; padding: 5px; overflow: auto; width: 100%"><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;title id='Description'&gt;Grid populated from Array.&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../scripts/jquery-1.6.2.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../jqwidgets/jqxcore.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../jqwidgets/jqxbuttons.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../jqwidgets/jqxscrollbar.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../jqwidgets/jqxmenu.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../jqwidgets/jqxgrid.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../jqwidgets/jqxgrid.selection.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../jqwidgets/jqxdata.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                &quot;Andrew&quot;, &quot;Nancy&quot;, &quot;Shelley&quot;, &quot;Regina&quot;, &quot;Yoshi&quot;, &quot;Antoni&quot;, &quot;Mayumi&quot;, &quot;Ian&quot;, &quot;Peter&quot;, &quot;Lars&quot;, &quot;Petra&quot;, &quot;Martin&quot;, &quot;Sven&quot;, &quot;Elio&quot;, &quot;Beate&quot;, &quot;Cheryl&quot;, &quot;Michael&quot;, &quot;Guylene&quot;
            ];
            var lastNames =
            [
                &quot;Fuller&quot;, &quot;Davolio&quot;, &quot;Burke&quot;, &quot;Murphy&quot;, &quot;Nagase&quot;, &quot;Saavedra&quot;, &quot;Ohno&quot;, &quot;Devling&quot;, &quot;Wilson&quot;, &quot;Peterson&quot;, &quot;Winkler&quot;, &quot;Bein&quot;, &quot;Petersen&quot;, &quot;Rossi&quot;, &quot;Vileid&quot;, &quot;Saylor&quot;, &quot;Bjorn&quot;, &quot;Nodier&quot;
            ];
            var productNames =
            [
                &quot;Black Tea&quot;, &quot;Green Tea&quot;, &quot;Caffe Espresso&quot;, &quot;Doubleshot Espresso&quot;, &quot;Caffe Latte&quot;, &quot;White Chocolate Mocha&quot;, &quot;Cramel Latte&quot;, &quot;Caffe Americano&quot;, &quot;Cappuccino&quot;, &quot;Espresso Truffle&quot;, &quot;Espresso con Panna&quot;, &quot;Peppermint Mocha Twist&quot;
            ];
            var priceValues =
            [
                &quot;2.25&quot;, &quot;1.5&quot;, &quot;3.0&quot;, &quot;3.3&quot;, &quot;4.5&quot;, &quot;3.6&quot;, &quot;3.8&quot;, &quot;2.5&quot;, &quot;5.0&quot;, &quot;1.75&quot;, &quot;3.25&quot;, &quot;4.0&quot;
            ];
            for (var i = 0; i &lt; 50; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row[&quot;firstname&quot;] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row[&quot;lastname&quot;] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row[&quot;productname&quot;] = productNames[productindex];
                row[&quot;price&quot;] = price;
                row[&quot;quantity&quot;] = quantity;
                row[&quot;total&quot;] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: &quot;array&quot;
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $(&quot;#jqxgrid&quot;).jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body class='default'&gt;
    &lt;div id='jqxWidget' style=&quot;font-size: 13px; font-family: Verdana; float: left;&quot;&gt;
        &lt;div id=&quot;jqxgrid&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7YMFU/">source is set to a custom object</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span30'>updatedelay</span>
                    </td>
                    <td>
                        <span>Number</span>
                    </td>
                    <td>0
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the rendering update delay. This could be used for deferred scrolling scenarios.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>updatedelay</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ updatedelay: 5}); </code></pre>
                            <p>
                                Get the <code>updatedelay</code> property.
                            </p>
                            <pre><code>var updatedelay = $('#jqxGrid').jqxGrid('updatedelay');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aYspj/">updatedelay is set to 20</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span36'>virtualmode</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Enables or disables the virtual data mode.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>virtualmode</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ virtualmode: true}); </code></pre>
                            <p>
                                Get the <code>virtualmode</code> property.
                            </p>
                            <pre><code>var virtualmode = $('#jqxGrid').jqxGrid('virtualmode');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j8JUh/">virtualmode is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span39'>columnsmenu</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>true
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxmenu.js)</p>
                            <p>
                                Enables or disables the columns dropdown menu.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>columnsmenu</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ columnsmenu: false}); </code></pre>
                            <p>
                                Get the <code>columnsmenu</code> property.
                            </p>
                            <pre><code>var columnsmenu = $('#jqxGrid').jqxGrid('columnsmenu');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YpDYq/">columnsmenu is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span151'>columnsresize</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.columnsresize.js)</p>
                            <p>
                                Enables or disables the columns resizing.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>columnsresize</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ columnsresize: false}); </code></pre>
                            <p>
                                Get the <code>columnsresize</code> property.
                            </p>
                            <pre><code>var columnsresize = $('#jqxGrid').jqxGrid('columnsresize');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ndn6X/">columnsresize is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span185'>columnsreorder</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.columnsreorder.js)</p>
                            <p>
                                Enables or disables the columns reordering.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>columnsreorder</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ columnsreorder: true}); </code></pre>
                            <p>
                                Get the <code>columnsreorder</code> property.
                            </p>
                            <pre><code>var columnsreorder = $('#jqxGrid').jqxGrid('columnsreorder');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nrp6f/">columnsreorder is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span85'>rendered</span>
                    </td>
                    <td>
                        <span>function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Callback function which is called when the jqxGrid's render function is called either internally or not.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>rendered</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ rendered: function(){//to do}}); </code></pre>
                            <p>
                                Get the <code>rendered</code> property.
                            </p>
                            <pre><code>var rendered = $('#jqxGrid').jqxGrid('rendered');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5DcnB/">rendered is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span99'>renderstatusbar</span>
                    </td>
                    <td>
                        <span>function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Callback function which allows you to customize the rendering of the Grid's statusbar. 
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>renderstatusbar</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ renderstatusbar: function(statusbar){//to do}}); </code></pre>
                            <p>
                                Get the <code>renderstatusbar</code> property.
                            </p>
                            <pre><code>var renderstatusbar = $('#jqxGrid').jqxGrid('renderstatusbar');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RVfRv/">renderstatusbar is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span100'>rendertoolbar</span>
                    </td>
                    <td>
                        <span>function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Callback function which allows you to customize the rendering of the Grid's toolbar. 
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>rendertoolbar</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ rendertoolbar: function(toolbar){//to do}}); </code></pre>
                            <p>
                                Get the <code>rendertoolbar</code> property.
                            </p>
                            <pre><code>var rendertoolbar = $('#jqxGrid').jqxGrid('rendertoolbar');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/N5qYC/">rendertoolbar is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span41'>sorttogglestates</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>2
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.sort.js)</p>
                            <br />
                            Sets the sort toggle states.            
                            <br />

                            <b>Possible Values:</b>
                            <br />
                            <pre><code>'0'-disables toggling</code></pre>
                            <pre><code></code>'1'-enables togging. Click on a column toggles the sort direction</pre>
                            <pre><code>'2'-enables remove sorting option</code></pre>

                            <h4>Code example</h4>
                            <p>
                                Set the <code>sorttogglestates</code> property.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid({ sorttogglestates: 1}); </code></pre>
                            <p>
                                Get the <code>sorttogglestates</code> property.
                            </p>
                            <pre><code>var sorttogglestates = $('#jqxGrid').jqxGrid('sorttogglestates');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nqfuL/">sorttogglestates is set to a 1</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span42'>rendergridrows</span>
                    </td>
                    <td>
                        <span>function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This is a function called when the grid is used in virtual mode. The function should return an array of rows which will be rendered by the Grid.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Set the <code>rendergridrows</code> function.
                            </p>
                            <pre><code>
// prepare the data
var data = new Array();
var firstNames =
[
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];

var lastNames =
[
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];

var productNames =
[
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];

var priceValues =
[
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];

// generate sample data.
var generatedata = function (startindex, endindex) {
    var data = {};
    for (var i = startindex; i < endindex; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);

        row["id"] = i;
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
        row["total"] = price * quantity;

        data[i] = row;
    }
    return data;
}

var source =
{
    datatype: "array",
    localdata: {},
    totalrecords: 1000000
};

// load virtual data.
var rendergridrows = function (params) {
    var data = generatedata(params.startindex, params.endindex);
    return data;
}            
                        </code></pre>
                            <p>
                                Get the <code>rendergridrows</code> property.
                            </p>
                            <pre><code>var rendergridrows = $('#jqxGrid').jqxGrid('rendergridrows');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WSpcw/">rendergridrows is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Events</h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span47'>rowclick</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a row is clicked.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>rowclick</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$('#jqxGrid').on('rowclick', function (event) 
{
    var args = event.args;
    // row's bound index.
    var boundIndex = args.rowindex;
    // row's visible index.
    var visibleIndex = args.visibleindex;
    // right click.
    var rightclick = args.rightclick; 
    // original event.
    var ev = args.originalEvent;                                                                                   
}); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XLDU7/">Bind to the rowclick event by type: jqxGrid.</a>
                            </div>


                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span176'>rowdoubleclick</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a row is double clicked.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>rowdoubleclick</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$('#jqxGrid').on('rowdoubleclick', function (event) 
{ 
    var args = event.args;
    // row's bound index.
    var boundIndex = args.rowindex;
    // row's visible index.
    var visibleIndex = args.visibleindex;
    // right click.
    var rightclick = args.rightclick; 
    // original event.
    var ev = args.originalEvent;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CgvvZ/">Bind to the rowdoubleclick event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span48'>rowselect</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a row is selected.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>rowselect</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$('#jqxGrid').on('rowselect', function (event) 
{
    // event arguments.
    var args = event.args;
    // row's bound index.
    var rowBoundIndex = args.rowindex;
    // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
    var rowData = args.row;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/G9KY5/">Bind to the rowselect event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span51'>rowunselect</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a row is unselected.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>rowunselect</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$('#jqxGrid').on('rowunselect', function (event) 
{
    // event arguments.
    var args = event.args;
    // row's bound index.
    var rowBoundIndex = args.rowindex;
    // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
    var rowData = args.row;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FCCXY/">Bind to the rowunselect event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span174'>rowexpand</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a row with details is expanded.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>rowexpand</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$('#jqxGrid').on('rowexpand', function (event) 
{
    // event arguments.
    var args = event.args;
    // row details.
    var details = args.details;
    // row's bound index.
    var rowBoundIndex = args.rowindex;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GL52a/">Bind to the rowexpand event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span175'>rowcollapse</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a row with details is collapsed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>rowcollapse</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$('#jqxGrid').on('rowcollapse', function (event) 
{ 
    // event arguments.
    var args = event.args;
    // row details.
    var details = args.details;
    // row's bound index.
    var rowBoundIndex = args.rowindex;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VDjGU/">Bind to the rowcollapse event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span49'>groupexpand</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a group is expanded.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>groupexpand</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on('groupexpand', function (event) 
{
   // event arguments.
    var args = event.args;
    // expanded group name.
    var group = args.group;
    // expanded group level.
    var level = args.level;
    // sub groups - contains an array of sub-level's groups.
    var subGroups = args.subgroups;
    // sub rows - contains an array of sub-level's data rows or null when there are only sub groups.
    var subRows = args.subrows;
});
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/keN2U/">Bind to the groupexpand event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span52'>groupcollapse</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a group is collapsed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>groupcollapse</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on('groupcollapse', function (event) 
{
    // event arguments.
    var args = event.args;
    // expanded group name.
    var group = args.group;
    // expanded group level.
    var level = args.level;
    // sub groups - contains an array of sub-level's groups.
    var subGroups = args.subgroups;
    // sub rows - contains an array of sub-level's data rows or null when there are only sub groups.
    var subRows = args.subrows;
});
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pRfV7/">Bind to the groupcollapse event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span50'>sort</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the Grid is sorted.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>sort</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("sort", function (event) 
{
    // event arguments.
    var args = event.args;
    // sorting information.
    var sortInfo = event.args.sortinformation;
    // sort direction.
    var sortdirection = sortInfo.sortdirection.ascending ? "ascending" : "descending";
    // column data field.
    var sortColumnDataField = sortInfo.sortcolumn;
});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xcUA3/">Bind to the sort event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span150'>filter</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the Grid is filtered.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>filter</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("filter", function (event) 
{
    var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YsNT2/">Bind to the filter event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span152'>columnresized</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a Grid Column is resized.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>columnresized</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("columnresized", function (event) 
{
    // event arguments.
    var args = event.args;
    // column text.
    var columnText = args.columntext;
    // column data field.
    var dataField = args.datafield;
    // old column width.
    var oldWidth = args.oldwidth;
    // new column width.
    var newWidth = args.newwidth;
});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xJQMm/">Bind to the columnresized event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span202'>columnreordered</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a Grid Column is moved to a new position.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>columnreordered</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("columnreordered", function (event) 
{
    // event arguments.
    var args = event.args;
    // column text.
    var columnText = args.columntext;
    // column data field.
    var dataField = args.datafield;
    // old column index.
    var oldIndex = args.oldindex;
    // new column index.
    var newIndex = args.newindex;
});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PMxtZ/">Bind to the columnreordered event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span53'>columnclick</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a column is clicked.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>columnclick</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("columnclick", function (event) 
{
    // event arguments.
    var args = event.args;
    // column's settings.
    var column = args.column;
    // column data field.
    var dataField = args.dataField;
     // original event.
    var ev = args.originalEvent;
});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sJh9j/">Bind to the columnclick event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span177'>cellclick</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a cell is clicked.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>cellclick</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("cellclick", function (event) 
{
    // event arguments.
    var args = event.args;
    // row's bound index.
    var rowBoundIndex = args.rowindex;
    // row's visible index.
    var rowVisibleIndex = args.visibleindex;
    // right click.
    var rightclick = args.rightclick; 
    // original event.
    var ev = args.originalEvent;
    // column index.
    var columnindex = args.columnindex;
    // column data field.
    var dataField = args.datafield;
    // cell value
    var value = args.value;
});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HB3Cb/">Bind to the cellclick event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span55'>celldoubleclick</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a cell is double-clicked.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>celldoubleclick</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("celldoubleclick", function (event)
{
    // event arguments.
    var args = event.args;
    // row's bound index.
    var rowBoundIndex = args.rowindex;
    // row's visible index.
    var rowVisibleIndex = args.visibleindex;
    // right click.
    var rightClick = args.rightclick; 
    // original event.
    var ev = args.originalEvent;
    // column index.
    var columnIndex = args.columnindex;
    // column data field.
    var dataField = args.datafield;
    // cell value
    var value = args.value;
});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Mp7gL/">Bind to the celldoubleclick event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span153'>cellselect</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a cell is selected.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>cellselect</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on('cellselect', function (event) 
{
    // event arguments.
    var args = event.args;
    // get the column's text.
    var column = $("#jqxGrid").jqxGrid('getcolumn', event.args.datafield).text;
    // column data field.
    var dataField = event.args.datafield;
    // row's bound index.
    var rowBoundIndex = event.args.rowindex;
    // cell value
    var value = args.value;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6hnpZ/">Bind to the cellselect event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span154'>cellunselect</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a cell is unselected.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>cellunselect</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on('cellunselect', function (event)
{
    // event arguments.
    var args = event.args;
    // get the column's text.
    var column = $("#jqxGrid").jqxGrid('getcolumn', event.args.datafield).text;
    // column data field.
    var dataField = event.args.datafield;
    // row's bound index.
    var rowBoundIndex = event.args.rowindex;
    // cell value
    var value = args.value;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qqVCM/">Bind to the cellunselect event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span170'>cellvaluechanged</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a cell's value is changed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>cellvaluechanged</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on('cellvaluechanged', function (event) 
{
    // event arguments.
    var args = event.args;
    // column data field.
    var datafield = event.args.datafield;
    // row's bound index.
    var rowBoundIndex = args.rowindex;
    // new cell value.
    var value = args.newvalue;
    // old cell value.
    var oldvalue = args.oldvalue;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ejvnb/">Bind to the cellvaluechanged event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span171'>cellbeginedit</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a cell's editor is displayed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>cellbeginedit</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on('cellbeginedit', function (event) 
{
    // event arguments.
    var args = event.args;
    // column data field.
    var dataField = event.args.datafield;
    // row's bound index.
    var rowBoundIndex = event.args.rowindex;
    // cell value
    var value = args.value;
    // row's data.
    var rowData = args.row;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NEWud/">Bind to the cellbeginedit event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span172'>cellendedit</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a cell's edit operation has ended.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>cellendedit</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on('cellendedit', function (event) 
{
    // event arguments.
    var args = event.args;
    // column data field.
    var dataField = event.args.datafield;
    // row's bound index.
    var rowBoundIndex = event.args.rowindex;
    // cell value
    var value = args.value;
    // cell old value.
    var oldvalue = args.oldvalue;
    // row's data.
    var rowData = args.row;
});
                         </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UEqup/">Bind to the cellendedit event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span54'>pagechanged</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the current page is changed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>pagechanged</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("pagechanged", function (event) 
{
    // event arguments.
    var args = event.args;
    // page number.
    var pagenum = args.pagenum;
    // page size.
    var pagesize = args.pagesize;
});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9s3LS/">Bind to the pagechanged event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span56'>pagesizechanged</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the page size is changed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>pagesizechanged</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("pagesizechanged", function (event) 
{
    // event arguments.
    var args = event.args;
    // page number.
    var pagenum = args.pagenum;
    // old page size.
    var oldpagesize = args.oldpagesize;
    // new page size.
    var pagesize = args.pagesize;
});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/B2sjB/">Bind to the pagesizechanged event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span57'>bindingcomplete</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the binding is completed. Note: Bind to that event before the Grid's initialization, because if you data bind the Grid to a local data source and bind to the "bindingcomplete" event after the initializaation, the data binding will be already completed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>bindingcomplete</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("bindingcomplete", function (event) {// your code here.});                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/74CTB/">Bind to the bindingcomplete event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span58'>groupschanged</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when a group is added, inserted or removed.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Bind to the <code>groupschanged</code> event by type: jqxGrid.
                            </p>
                            <pre><code>
$("#jqxGrid").on("groupschanged", 
    function (event) 
    {
        // event arguments.
        var args = event.args;
        // type of change. Possible values: Add, Remove, Clear, Insert
        var type = args.type;
        // group index. The index of the added, removed or inserted group. If the type is "Clear", -1 is passed.
        var groupIndex = args.index.
        // groups array.
        var groups = args.groups;
    });                       
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Au8Vn/">Bind to the groupschanged event by type: jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Methods</h2>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th>Common
                    </th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span203'>getcolumnindex</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.columnsreorder.js)</p>
                            <p>
                                Gets the index of a column in the columns collection.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>getcolumnindex</code> method.
                            </p>
                            <pre><code>
// @param String. The column datafield member.
var index = $('#jqxGrid').jqxGrid('getcolumnindex', 'name');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yKNu5/">gets a column index in the jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span183'>setcolumnindex</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.columnsreorder.js)</p>
                            <p>
                                Sets the index of a column in the columns collection.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>setcolumnindex</code> method.
                            </p>
                            <pre><code>
// @param String. The column datafield member.
// @param Number. The column's number.
var column = $('#jqxGrid').jqxGrid('setcolumnindex', 'name', 3);
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9ePBx/">sets a column index in the jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span82'>getcolumn</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Gets a column by datafield value.Column's fields:
                            </p>
                            <ul>
                                <li>datafield - column's datafield. To get the cells labels and values from the data source, the Grid uses the "datafield" and "displayfield" properties. If the "displayfield" is not set, the "displayfield" is equal to the "datafield'.</li>
                                <li>text - column's text.</li>
                                <li>displayfield - column's displayfield. To get the cells labels and values from the data source, the Grid uses the "datafield" and "displayfield" properties. If the "displayfield" is not set, the "displayfield" is equal to the "datafield'.</li>
                                <li>sortable - determines whether the column is sortable.</li>
                                <li>filterable - determines whether the column is filterable.</li>
                                <li>exportable - determines whether the column will be exported through the "exportdata" method.</li>
                                <li>editable - determines whether the column is editable.</li>
                                <li>groupable - determines whether the column is groupable.</li>
                                <li>resizable - determines whether the column is resizable.</li>
                                <li>draggable - determines whether the column is draggable.</li>
                                <li>classname - determines the column's header classname.</li>
                                <li>cellclassname - determines the column's cells classname.</li>
                                <li>width - determines the column's width.</li>
                                <li>menu - determines whether the column has an associated popup menu or not.</li>
                            </ul>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>getcolumn</code> method.
                            </p>
                            <pre><code>
// @param String. The column datafield member.
var column = $('#jqxGrid').jqxGrid('getcolumn', 'columndatafield');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HDz7p/">Invoke the getcolumn method of the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span83'>setcolumnproperty</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets a property of a column.Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth'
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>setcolumnproperty</code> method. 
                            </p>
                            <pre><code>
// @param String. Column data field.
// @param String. Property Name.
// @param Object. Property Value.
$('#jqxGrid').jqxGrid('setcolumnproperty', 'firstname', 'width', 100);
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XSKXc/">Invoke the setcolumnproperty method of the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span84'>getcolumnproperty</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Gets a property of a column.  Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth'
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>getcolumnproperty</code> method.
                            </p>
                            <pre><code>
// @param String. Column data field.
// @param String. Property Name.
var value = $('#jqxGrid').jqxGrid('getcolumnproperty', 'firstname', 'width');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jUVLk/">Invoke the getcolumnproperty method of the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span88'>hidecolumn</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Hides a column.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>hidecolumn</code> method.
                            </p>
                            <pre><code>
// @param String. The column datafield member.
$('#jqxGrid').jqxGrid('hidecolumn', 'columndatafield');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5YtCm/">Hides a column in the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span89'>showcolumn</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Shows a column.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>showcolumn</code> method.
                            </p>
                            <pre><code>
// @param String. The column datafield member.
$('#jqxGrid').jqxGrid('showcolumn', 'columndatafield');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YC8qJ/">show the hidden column in the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span90'>iscolumnvisible</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Gets whether a column is visible. Returns a boolean value.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>iscolumnvisible</code> method.
                            </p>
                            <pre><code>
// @param String. The column datafield member.
var visible = $('#jqxGrid').jqxGrid('iscolumnvisible', 'columndatafield');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/G7tjU/">Invoke the iscolumnvisible method of the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span104'>pincolumn</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Pins the column.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>pincolumn</code> method.
                            </p>
                            <pre><code>
// @param String. The column datafield member.
$('#jqxGrid').jqxGrid('pincolumn', 'columndatafield');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SLfHr/">pin a column in the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span105'>unpincolumn</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Unpins the column.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>unpincolumn</code> method.
                            </p>
                            <pre><code>
// @param String. The column datafield member.
$('#jqxGrid').jqxGrid('unpincolumn', 'columndatafield');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WkvKY/">unpin a column in the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span106'>iscolumnpinned</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Gets whether a column is pinned. Returns a boolean value.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>iscolumnpinned</code> method.
                            </p>
                            <pre><code>
// @param String. The column datafield member.
var pinned = $('#jqxGrid').jqxGrid('iscolumnpinned', 'columndatafield');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gPEec/">Invoke the iscolumnpinned method of the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span181'>autoresizecolumns</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.columnsresize.js)</p>
                            <p>
                                Auto-resizes all columns.
                            </p>
                            Optional parameter:
                         <br />
                            'all' - resize columns to fit to cells and column header. This is the default option.
                        <br />
                            'cells' - resize columns to fit to the cells text. 
                        <br />
                            'column' - resize columns to fit to the columns text.
                         <h4>Code example</h4>
                            Invoke the <code>autoresizecolumns</code> method. 
                       
                        <pre><code>$('#jqxGrid').jqxGrid('autoresizecolumns'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZyaQF/">resizes the columns in the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span182'>autoresizecolumn</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>(requires jqxgrid.columnsresize.js)</p>
                            <p>
                                Auto-resizes a column.
                            </p>
                            First Parameter - the column's datafield. 
                        <br />
                            Second Parameter(optional:
                        <br />
                            'all' - resize columns to fit to cells and column header. This is the default option.
                        <br />
                            'cells' - resize columns to fit to the cells text. 
                        <br />
                            'column' - resize columns to fit to the columns text.
                         <h4>Code example</h4>
                            Invoke the <code>autoresizecolumn</code> method. 
                       
                        <pre><code>$('#jqxGrid').jqxGrid('autoresizecolumn', 'firstname'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VLs2r/">resizes the column in the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span118'>showloadelement</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Shows the data loading image.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>showloadelement</code> method.
                            </p>
                            <pre><code>
$('#jqxGrid').jqxGrid('showloadelement');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/g7zEL/">shows the data loading image in the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span119'>hideloadelement</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Hides the data loading image.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>hideloadelement</code> method.
                            </p>
                            <pre><code>
$('#jqxGrid').jqxGrid('hideloadelement');
                        </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kZh6F/">hide the data loading image in the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span179'>focus</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the keyboard Focus to the jqxGrid widget.
                            </p>
                            <h4>Code example</h4>
                            <p>
                                Invoke the <code>focus</code> method.
                            </p>
                            <pre><code>$('#jqxGrid').jqxGrid('focus');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UbK74/">focus the  jqxGrid.</a>
                            </div>
                        </div>
                    </td>
                </tr>


            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span111'>showrowdetails</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows the details of a row.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>showrowdetails</code> method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#jqxGrid').jqxGrid('showrowdetails', 1);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/84jBX/">shows row details in the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span112'>hiderowdetails</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Hides the details of a row.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>hiderowdetails</code> method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#jqxGrid').jqxGrid('hiderowdetails', 1);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pyGV6/">hide row details in the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span121'>updatebounddata</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Updates the bound data and refreshes the grid. You can pass 'filter' or 'sort' as parameter, if the update reason is change in 'filtering' or 'sorting'. 
                            To update only the data without the columns, use the 'data' parameter. To make a quick update of the cells, pass "cells" as parameter. Passing "cells" will refresh only the cells values when the new rows count is equal to the previous rows count.
                            To make a full update, do not pass any parameter.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>updatebounddata</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('updatebounddata');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dRbAE/">Invoke the updatebounddata method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span122'>refreshdata</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Refreshes the data.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>refreshdata</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('refreshdata');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CMu3p/">Invoke the refreshdata method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span173'>refresh</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Repaints the Grid View.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>refresh</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('refresh');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FeT8L/">Invoke the refresh method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span123'>render</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Renders the Grid contents. This method completely refreshes the Grid cells, columns, layout and repaints the view. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>render</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('render');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RuSjf/">Invoke the render method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span124'>clear</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Clears the Grid contents.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>clear</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('clear');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2dsfE/">Invoke the clear method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span128'>getrowid</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the id of a row. The returned value is a 'String' or 'Number' depending on the id's type. The parameter is the row's bound index.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getrowid</code> method. The example code below returns the id of the first row. 
                        </p>
                        <pre><code>
// @param row index.
var id = $('#jqxGrid').jqxGrid('getrowid', 0);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/H8d4f/">Invoke the getrowid method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span132'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes the Grid from the document and releases its resources.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('destroy');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Mv9Nj/">destroy the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span127'>getrowdata</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the data of a row. The returned value is a JSON Object. The parameter is the row's bound index. Note: If you pass a bound index of a row which is not visible in the Grid, the method returns null.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getrowdata</code> method.
                        </p>
                        <pre><code>
// @param row index.
var data = $('#jqxGrid').jqxGrid('getrowdata', 0);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7pdyg/">Invoke the getrowdata method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span120'>getrowdatabyid</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the data of a row. The returned value is a JSON Object. The parameter is the row's id. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getrowdatabyid</code> method.
                        </p>
                        <pre><code>
// @param bound index. Bound index is the row's index in the array returned by the "getboundrows" method.
var rowid = $('#jqxGrid').jqxGrid('getrowid', 5);
// @param row id
var data = $('#jqxGrid').jqxGrid('getrowdatabyid', rowid);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/E3JrB/">Invoke the getrowdatabyid method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span135'>getrowboundindexbyid</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the index of a row in the array returned by the <code>getboundrows</code> method.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getrowboundindexbyid</code> method.
                        </p>
                        <pre><code>
// @param row id
var data = $('#jqxGrid').jqxGrid('getrowboundindexbyid', rowid);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hWWqW/">Invoke the getrowboundindexbyid method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span214'>getrowboundindex</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the index of a row in the array returned by the <code>getboundrows</code> method.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getrowboundindex</code> method.
                        </p>
                        <pre><code>
// @param index - the row's display index.
var data = $('#jqxGrid').jqxGrid('getrowboundindex', 0);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gcrjx/">Invoke the getrowboundindex method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span86'>getrows</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets all rows. Returns an array of all rows loaded in the Grid. If the Grid is filtered, the returned value is an array of the filtered records.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getrows</code> method.
                        </p>
                        <pre><code>
var rows = $('#jqxGrid').jqxGrid('getrows');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/q44HB/">Invoke the getrows method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span195'>getboundrows</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets all rows loaded from the data source. The method returns an Array of all rows. The Grid's sorting, filtering, grouping and paging will not affect the result of this method. It will
                            always return the rows collection loaded from the data source.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getboundrows</code> method.
                        </p>
                        <pre><code>
// gets all rows loaded from the data source.
var rows = $('#jqxGrid').jqxGrid('getboundrows');
// gets the first row loaded from the data source.
var rowData = rows[0];
// gets the ID of the first row.                            
var rowID = rowData.uid;
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3LLVW/">Invoke the getboundrows method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span196'>getdisplayrows</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets all rows that are currently displayed in the Grid. The method returns an Array of the displayed rows. The Grid's sorting, filtering, grouping and paging will affect the result of this method.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getdisplayrows</code> method.
                        </p>
                        <pre><code>
// gets all rows loaded from the data source.
var rows = $('#jqxGrid').jqxGrid('getdisplayrows');
// gets the first displayed row.
var rowData = rows[0];
// gets the ID of the first displayed row.                            
var rowID = rowData.uid;
// gets the bound index of the first displayed row. The bound index is the row's index in the array returned by the "getboundrows" method.
var boundIndex = rowdData.boundindex;
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/g6RXf/">Invoke the getdisplayrows method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>getdatainformation</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets bound data information.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getdatainformation</code> method.
                        </p>
                        <pre><code>
var datainformation = $('#jqxGrid').jqxGrid('getdatainformation');
var rowscount = datainformation.rowscount;
var sortinformation = datainformation.sortinformation;
var sortcolumn = sortinformation.sortcolumn;
var sortdirection = sortinformation.sortdirection;
var paginginformation = datainformation.paginginformation;
var pagenum = paginginformation.pagenum;
var pagesize = paginginformation.pagesize;
var pagescount = paginginformation.pagescount;
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/AzT4J/">Invoke the getdatainformation method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span59'>getsortinformation</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the sort information.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getsortinformation</code> method.
                        </p>
                        <pre><code>
var sortinformation = $('#jqxGrid').jqxGrid('getsortinformation');
// The sortcolumn represents the sort column's datafield. If there's no sort column, the sortcolumn is null.                            
var sortcolumn = sortinformation.sortcolumn;
// The sortdirection is an object with two fields: 'ascending' and 'descending'. Ex: { 'ascending': true, 'descending': false }                            
var sortdirection = sortinformation.sortdirection;
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hkRXX/">Invoke the getsortinformation method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span60'>getpaginginformation</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.pager.js)</p>
                        <p>
                            Gets the paging information.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getpaginginformation</code> method.
                        </p>
                        <pre><code>
var paginginformation = $('#jqxGrid').jqxGrid('getpaginginformation');
// The page's number.
var pagenum = paginginformation.pagenum;
// The page's size.
var pagesize = paginginformation.pagesize;
// The number of all pages.
var pagescount = paginginformation.pagescount;
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SgbXd/">Invoke the getpaginginformation method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span70'>localizestrings</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Localizes the grid strings. This method allows you to change the valus of all Grid strings and also to change the cells formatting settings.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>localizestrings</code> method.
                        </p>
                        <pre><code>
var localizationobj = {};
localizationobj.pagergotopagestring = "Page:";
localizationobj.pagershowrowsstring = "angezeigten datensätze";
localizationobj.pagerrangestring = " aus ";
localizationobj.pagernextbuttonstring = "kommend";
localizationobj.pagerpreviousbuttonstring = "vorherig";
localizationobj.sortascendingstring = "aufsteigend sortieren";
localizationobj.sortdescendingstring = "absteigend sortieren";
localizationobj.sortremovestring = "entfernen sortierung";

localizationobj.firstDay = 1;
localizationobj.percentsymbol = "%";
localizationobj.currencysymbol = "€";
localizationobj.currencysymbolposition = "before";
localizationobj.decimalseparator = ".";
localizationobj.thousandsseparator = ",";

var days = {
    // full day names
    names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
    // abbreviated day names
    namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
    // shortest day names
    namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
};

localizationobj.days = days;

var months = {
    // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
    names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
    // abbreviated month names
    namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
};

localizationobj.months = months;

// apply localization.
$("#jqxGrid").jqxGrid('localizestrings', localizationobj);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ENbB6/">Invoke the localizestrings method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span71'>scrolloffset</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Scrolls the grid contents.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>scrolloffset</code> method.
                        </p>
                        <pre><code>
//@param Number. Top position.
//@param Number. Left position.
$('#jqxGrid').jqxGrid('scrolloffset', 10, 20);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8jdpA/">Invoke the scrolloffset method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>scrollposition</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Returns the scrollbars position.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>scrollposition</code> method.
                        </p>
                        <pre><code>
var position = $('#jqxGrid').jqxGrid('scrollposition');
var left = position.left;
var top = position.top;
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cWADt/">Invoke the scrollposition method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span72'>beginupdate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once. Optional boolean parameter: suspendAllActions. When you call beginupdate with parameter equal to <code>true</code>, the jqxGrid stops all rendering processes and when you call "endupdate", it will call the "render" method. Otherwise, it will try to resume its state with minimial performance impact. Use the suspendAllActions when you make multiple changes which require full-rerender such as changing the Grid's source, columns, groups.  
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>beginupdate</code> method.
                        </p>
                        <pre><code>.
$('#jqxGrid').jqxGrid('beginupdate');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/adS4S/">Invoke the beginupdate method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span73'>endupdate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Ends the update operation.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>endupdate</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('endupdate');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3v5Qg/">Invoke the endupdate method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span74'>updating</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the updating operation state. Returns a boolean value.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>updating</code> method.
                        </p>
                        <pre><code>
var isupdating = $('#jqxGrid').jqxGrid('updating');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PUGJW/">Invoke the  updating of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span75'>ensurerowvisible</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Scrolls to a row. The parameter is a bound index.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>ensurerowvisible</code> method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#jqxGrid').jqxGrid('ensurerowvisible', 100);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hBM5L/">Invoke the ensurerowvisible method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Sorting(requires jqxgrid.sort.js) 
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span61'>sortby</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sorts the Grid data.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>sortby</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('sortby', 'columndatafield', 'asc');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7yWdu/">Invoke the sortby method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span133'>removesort</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes the sorting.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>removesort</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('removesort');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Ufgs8/">Invoke the removesort method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span62'>getsortcolumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.sort.js)</p>
                        <p>
                            Gets the sort column. Returns the column's datafield or null, if sorting is not applied.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getsortcolumn</code> method.
                        </p>
                        <pre><code>
var sortcolumn = $('#jqxGrid').jqxGrid('getsortcolumn');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/M9Bxj/">Invoke the getsortcolumn method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Grouping(requires jqxgrid.grouping.js)                
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>addgroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Groups by a column.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>addgroup</code> method.
                        </p>
                        <pre><code>
// @param String. The expected parameter is the column's datafield.
$('#jqxGrid').jqxGrid('addgroup', 'columndatafield');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xZ4qU/">Invoke the addgroup method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span64'>insertgroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Groups by a column. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>insertgroup</code> method.
                        </p>
                        <pre><code>
// @param Number
// @param String. The expected parameter is the column's datafield.
$('#jqxGrid').jqxGrid('insertgroup', 1, 'columndatafield');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vTjs8/">Invoke the insertgroup method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span65'>removegroupat</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes a group at specific index.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>removegroupat</code> method.
                        </p>
                        <pre><code>
//@param Number
$('#jqxGrid').jqxGrid('removegroupat', 1);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UK7mF/">Invoke the removegroupat method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span66'>removegroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes a group.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>removegroup</code> method.
                        </p>
                        <pre><code>
//@param String. The expected parameter is the column's datafield.
$('#jqxGrid').jqxGrid('removegroup', 'firstname');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PKyT3/">Invoke the removegroup method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span198'>cleargroups</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Clears all groups.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>cleargroups</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('cleargroups');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vn6nv/">Invoke the cleargroups method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span113'>getrootgroupscount</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the number of root groups. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getrootgroupscount</code> method.
                        </p>
                        <pre><code>
var groups = $('#jqxGrid').jqxGrid('getrootgroupscount');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZRe9R/">Invoke the getrootgroupscount method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span114'>collapsegroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Collapses a group.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>collapsegroup</code> method.
                        </p>
                        <pre><code>
// @param Number. The group index.
$('#jqxGrid').jqxGrid('collapsegroup', 1);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6eXxT/">Invoke the collapsegroup method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span115'>expandgroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Expands a group.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>expandgroup</code> method.
                        </p>
                        <pre><code>
// @param Number. The group index.
$('#jqxGrid').jqxGrid('expandgroup', 1);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WLPCu/">Invoke the expandgroup method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span116'>collapseallgroups</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Collapses all groups.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>collapseallgroups</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('collapseallgroups');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tcq8u/">Invoke the collapseallgroups method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span117'>expandallgroups</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Expands all groups.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>expandallgroups</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('expandallgroups');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rS6AP/">Invoke the expandallgroups method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span137'>getgroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets a group. The method returns an Object with details about the Group. The object has the following fields: 
                        </p>
                        <ul>
                            <li>group - group's name.</li>
                            <li>level - group's level in the group's hierarchy.</li>
                            <li>expanded - group's expand state.</li>
                            <li>subgroups - an array of sub groups or null.</li>
                            <li>subrows - an array of rows or null.</li>
                        </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getgroup</code> method.
                        </p>
                        <pre><code>
// @param Number. The group index.
var group = $('#jqxGrid').jqxGrid('getgroup', 0);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tbCwt/">Invoke the getgroup method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span94'>iscolumngroupable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets whether the user can group by a column. Returns a boolean value.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>iscolumngroupable</code> method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
var groupable = $('#jqxGrid').jqxGrid('iscolumngroupable', 'columndatafield');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EH5fL/">Invoke the iscolumngroupable method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Filtering(requires jqxgrid.filter.js) 
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span140'>addfilter</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Adds a filter to the Grid.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>addfilter</code> method.
                        </p>
                        <pre><code>
var filtergroup = new $.jqx.filter();
var filtervalue = 10; // Each cell value is compared with the filter's value.
// filtertype - numericfilter, stringfilter, datefilter or customfilter. 
// condition
// possible conditions for string filter: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
// 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
// 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL'
// possible conditions for numeric filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
// possible conditions for date filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'                         
var filter = filtergroup.createfilter(filtertype, filtervalue, condition);
var filter2 = filtergroup.createfilter(filtertype, filtervalue2, condition2);
// To create a custom filter, you need to call the createfilter function and pass a custom callback function as a fourth parameter.
// If the callback's name is 'customfilter', the Grid will pass 3 params to this function - filter's value, current cell value to evaluate and the condition.                        
// operator - 0 for "and" and 1 for "or"
filtergroup.addfilter(operator, filter);
filtergroup.addfilter(operator, filter2);
// datafield is the bound field.
// adds a filter to the grid.
$('#grid').jqxGrid('addfilter', datafield, filtergroup);
// to add and apply the filter, use this:
$('#jqxGrid').jqxGrid('addfilter', datafield, filtergroup, true);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/P7BCs/">Invoke the addfilter method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span141'>removefilter</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes a filter from the Grid.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>removefilter</code> method.
                        </p>
                        <pre><code>// datafield is the bound field.
$('#jqxGrid').jqxGrid('removefilter', datafield);
// to remove the filter and refresh the Grid, use this:
$('#jqxGrid').jqxGrid('removefilter', datafield, true);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4Q9PM/">Invoke the removefilter method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span142'>clearfilters</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Clears all filters from the Grid. You can call the method with optional boolean parameter. If the parameter is "true" or you call the method without parameter, the Grid will
                            clear the filters and refresh the Grid(default behavior). If the parameter is "false", the method will clear the filters without refreshing the Grid. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>clearfilters</code> method.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid('clearfilters');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4DMBV/">Invoke the clearfilters method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span143'>applyfilters</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Applies all filters to the Grid.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>applyfilters</code> method.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid('applyfilters');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Eeume/">Invoke the applyfilters method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span207'>refreshfilterrow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Refreshes the filter row and updates the filter widgets. The filter row's widgets are synchronized with the applied filters. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>refreshfilterrow</code> method.
                        </p>
                        <pre><code>$('#jqxGrid').jqxGrid('refreshfilterrow');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CQye8/">Invoke the refreshfilterrow method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span144'>getfilterinformation</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the information about the Grid filters. The method returns an array of the applied filters. The returned information includes the filter objects and filter columns.
                            Each filter in the Array has the following fields:
                        </p>
                        <ul>
                            <li>filter - a filter object which may contain one or more filters.
                                <br />
                                Properties and Methods of the filter object.
                                <ul>
                                    <li>getfilters - returns an array of all filters in the filter object. Each filter in the Array has:
                                        <ul>
                                            <li>value - filter's value.</li>
                                            <li>id - filter's id.</li>
                                            <li>condition - filter's operator. For String filter the value could be: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
        'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
        'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL. For Date and Number filter the value could be: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'. For Boolean filter, the value could be:
                                                'EQUAL', 'NOT_EQUAL'
                                            </li>
                                            <li>type - filter's type - 'stringfilter', 'numericfilter', 'booleanfilter' or 'datefilter'.</li>
                                        </ul>
                                    </li>
                                    <li>operator - 'and' or 'or'. Determines the connection between the filters in the group.</li>
                                </ul>
                            </li>
                            <li>datafield - the column's datafield.
                            </li>
                            <li>displayfield - the column's display field.</li>
                        </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getfilterinformation</code> method.
                        </p>
                        <pre><code>
var filtersinfo = $('#jqxGrid').jqxGrid('getfilterinformation');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uyvqL/">Invoke the getfilterinformation method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Paging(requires jqxgrid.pager.js) 
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span67'>gotopage</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Navigates to a page when the Grid paging is enabled i.e when the pageable property value is true.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>gotopage</code> method.
                        </p>
                        <pre><code>
//@param Number
$('#jqxGrid').jqxGrid('gotopage', 1);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tYPyV/">Invoke the gotopage method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span68'>gotoprevpage</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Navigates to a previous page when the Grid paging is enabled i.e when the pageable property value is true.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>gotoprevpage</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('gotoprevpage');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8uCXc/">Invoke the gotoprevpage method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span69'>gotonextpage</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Navigates to a next page when the Grid paging is enabled i.e when the pageable property value is true.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>gotonextpage</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('gotonextpage');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hNhTF/">Invoke the gotonextpage method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Editing(requires jqxgrid.edit.js) 
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span125'>getcell</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets a cell. Returns an object with the following fields:
                        </p>
                        <ul>
                            <li>value - cell's value.</li>
                            <li>row - cell's row number.</li>
                            <li>column - column's datafield.</li>
                        </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getcell</code> method.
                        </p>
                        <pre><code>
// @param Number. The row index.
// @param String. The column datafield.
var cell = $('#jqxGrid').jqxGrid('getcell', 0, datafield);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9KHrm/">Invoke the getcell method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span178'>getcellatposition</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets a cell at specific position. Returns an object with the following fields:
                        </p>
                        <ul>
                            <li>value - cell's value.</li>
                            <li>row - cell's row number.</li>
                            <li>column - column's datafield.</li>
                        </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getcellatposition</code> method.
                        </p>
                        <pre><code>
// @param Number. The left position.
// @param Number. The top position.
var cell = $('#jqxGrid').jqxGrid('getcellatposition', left, top);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Q3RQG/">Invoke the getcellatposition method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span209'>getcelltext</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the text of a cell. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getcelltext</code> method.
                        </p>
                        <pre><code>
// @param row index.
// @param column datafield.
var text = $('#jqxGrid').jqxGrid('getcelltext', 0, "columndatafield");
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m5Fkb/">Invoke the getcelltext method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span212'>getcelltextbyid</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the text of a cell. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getcelltextbyid</code> method.
                        </p>
                        <pre><code>
// @param row id.
// @param column datafield.
var text = $('#jqxGrid').jqxGrid('getcelltextbyid', id1, "columndatafield");
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FWdLv/">Invoke the getcelltextbyid method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span211'>getcellvaluebyid</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the value of a cell. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getcellvaluebyid</code> method.
                        </p>
                        <pre><code>
// @param row id.
// @param column datafield.
var value = $('#jqxGrid').jqxGrid('getcellvaluebyid', id1, "columndatafield");
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2NmQW/">Invoke the getcellvaluebyid method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span126'>getcellvalue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the value of a cell. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getcellvalue</code> method.
                        </p>
                        <pre><code>
// @param row index.
// @param column datafield.
var value = $('#jqxGrid').jqxGrid('getcellvalue', 0, "columndatafield");
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pyE55/">Invoke the getcellvalue method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span38'>setcellvalue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets a new value to a cell.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>setcellvalue</code> method.
                        </p>
                        <pre><code>
// @param row index.
// @param column datafield.
// @param cell value
 $("#jqxGrid").jqxGrid('setcellvalue', 0, "firstname", "New Value");
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uuW2H/">Invoke the setcellvalue method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span210'>setcellvaluebyid</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets a new value to a cell.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>setcellvaluebyid</code> method.
                        </p>
                        <pre><code>
// @param row id.
// @param column datafield.
// @param cell value
 $("#jqxGrid").jqxGrid('setcellvaluebyid', id1, "firstname", "New Value");
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9Qhtg/">Invoke the setcellvaluebyid method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span161'>begincelledit</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows the cell's editor.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>begincelledit</code> method.
                        </p>
                        <pre><code>
// @param row index
// @param column datafield.
var editable = $("#jqxGrid").jqxGrid('begincelledit', 0, "firstname");
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/skzmE/">Invoke the begincelledit method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span162'>endcelledit</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Hides the edit cell's editor and saves or cancels the changes.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>endcelledit</code> method.
                        </p>
                        <pre><code>
// @param row index
// @param column datafield.
// @param Boolean. - "true" cancels the changes, "false" confirms the changes.
var editable = $("#jqxGrid").jqxGrid('endcelledit', 0, "firstname", false);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Z6WHX/">Invoke the endcelledit method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span215'>beginrowedit</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows the cell editors for an entire row.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>beginrowedit</code> method.
                        </p>
                        <pre><code>
// @param row index
$("#jqxGrid").jqxGrid('beginrowedit', 0);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nUc8P/">Invoke the beginrowedit method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span216'>endrowedit</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Hides the edited row's editors and saves or cancels the changes.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>endrowedit</code> method.
                        </p>
                        <pre><code>
// @param row index
// @param Boolean. - "true" cancels the changes, "false" confirms the changes.
$("#jqxGrid").jqxGrid('endrowedit', 0, false);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6Lm7S/">Invoke the endrowedit method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>


            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span194'>showvalidationpopup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Displays a validation popup below a Grid cell.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>showvalidationpopup</code> method.
                        </p>
                        <pre><code>
// @param row index
// @param column datafield.
// @param String(optional)
$("#jqxGrid").jqxGrid('showvalidationpopup', 0, "firstname", "Invalid Value");
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8gUGD/">Invoke the showvalidationpopup method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
        <tr>
                <td class="documentation-option-type-click">
                    <span id='Span225'>openmenu</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Displays a column's menu.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>openmenu</code> method.
                        </p>
                        <pre><code>
// @param column datafield.
$("#jqxGrid").jqxGrid('openmenu', "firstname");
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cczs8po6/">Invoke the openmenu method of the jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
        <tr>
                <td class="documentation-option-type-click">
                    <span id='Span226'>closemenu</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Closes a column's menu.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>closemenu</code> method.
                        </p>
                        <pre><code>
$("#jqxGrid").jqxGrid('closemenu');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cczs8po6/">Invoke the closemenu method of the jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span129'>updaterow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Updates a row or multiple rows. 
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Invoke the <code>updaterow</code> method.
                        </p>
                        <pre><code>
// @param row id. Use the 'getrowid' method to get the id of a row.
// @param row data. The expected value is a JSON object.
var value = $('#jqxGrid').jqxGrid('updaterow', rowid, newdata);
                        </code></pre>
                        <p>Invoke the <code>updaterow</code> method to update multiple rows at once.</p>
                        <pre><code>
var rows = $("#jqxgrid").jqxGrid('getboundrows');
// prepare an array with new rows.
var newRows = new Array();
newRows.push(generaterow());
newRows.push(generaterow());
// prepare an array with row ids to update.
var rowIDs = new Array();
rowIDs.push(rows[0].uid);
rowIDs.push(rows[1].uid);
var commit = $("#jqxgrid").jqxGrid('updaterow', rowIDs, newRows);
</code></pre>
                        <p>When you call the <code>updaterow</code> method, the Grid will also call the source object's <code>updaterow</code> callback function(if defined). You can use that callback function for server synchronization.</p>
                        <pre><code>
var source =
{
    url: url,
    datatype: "json",
    datafields:
    [
        { name: 'firstname', type: 'string' },
        { name: 'lastname', type: 'string' },
        { name: 'productname', type: 'string' },
        { name: 'quantity', type: 'number' },
        { name: 'price', type: 'number' },
        { name: 'total', type: 'number' }
    ],
    updaterow: function (rowid, rowdata, commit) {
        // synchronize with the server - send update command
        // call commit with parameter true if the synchronization with the server was successful 
        // and with parameter false if the synchronization has failed.
        commit(true);
    }
};
 </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KCqqG/">Invoke the updaterow method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span130'>deleterow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Deletes a row or multiple rows. Returns a boolean value.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Invoke the <code>deleterow</code> method.
                        </p>
                        <pre><code>
// @param row id. Use the 'getrowid' method to get the id of a row.
var value = $('#jqxGrid').jqxGrid('deleterow', rowid);
                        </code></pre>
                        <p>
                            Invoke the <code>deleterow</code> method with an Array of row ids. If you pass an array of row ids, the Grid will delete multiple rows.
                        </p>
                        <pre><code>
// get the rows loaded from the data source. Note that "getboundrows" method returns an array of rows loaded from the data source. The Grid's sorting, filtering, grouping and paging will not affect the result of the "getboundrows" method. If you want to get an array of the displayed rows, use the "getdisplayrows" method instead.
var rows = $("#jqxgrid").jqxGrid('getboundrows');
// populate an array with the first and second row ids. "uid" is the row's id. 
var rowIDs = new Array();
rowIDs.push(rows[0].uid);
rowIDs.push(rows[1].uid);
// delete the first and second rows.
var commit = $("#jqxgrid").jqxGrid('deleterow', rowIDs);
</code></pre>
                        <p>When you call the <code>deleterow</code> method, the Grid will also call the source object's <code>deleterow</code> callback function(if defined). You can use that callback function for server synchronization.</p>
                        <pre><code>
var source =
{
    url: url,
    datatype: "json",
    datafields:
    [
        { name: 'firstname', type: 'string' },
        { name: 'lastname', type: 'string' },
        { name: 'productname', type: 'string' },
        { name: 'quantity', type: 'number' },
        { name: 'price', type: 'number' },
        { name: 'total', type: 'number' }
    ],
    deleterow: function (rowid, commit) {
        // synchronize with the server - send delete command
        // call commit with parameter true if the synchronization with the server was successful 
        // and with parameter false if the synchronization has failed.
        commit(true);
    }
};
 </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dS357/">Invoke the deleterow method of the  jqxGrid.</a>
                        </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span131'>addrow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Adds a new row or multiple rows.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Invoke the <code>addrow</code> method. Add a new row.
                        </p>
                        <pre><code>
// @param row id. Pass null, if you want the new id to be auto-generated or pass a row id.
// @param row data. The expected value is a JSON Object.
var value = $('#jqxGrid').jqxGrid('addrow', rowid, newdata);
                        </code></pre>
                        <p>
                            Invoke the <code>addrow</code> method. Add a new empty row.
                        </p>
                        <pre><code>
// @param row id. Pass null, if you want the new id to be auto-generated or pass a row id.
// @param row data. The expected value is a JSON Object.
var value = $('#jqxGrid').jqxGrid('addrow', rowid, {});
                        </code></pre>

                        <p>
                            Invoke the <code>addrow</code> method. Add several rows. In order to add several rows, you need to pass an Array of row ids and an array of rows as parameters. If you pass null as first parameter, the Grid will try to auto generate the row ids. 
                        </p>
                        <pre><code>
var rows = new Array();
for (var i = 0; i < 10; i++) {
    var datarow = generaterow();
    rows.push(datarow);
}
$("#jqxgrid").jqxGrid('addrow', null, rows);
                        </code></pre>
                        <p>When you call the <code>addrow</code> method, the Grid will also call the source object's <code>addrow</code> callback function(if defined). You can use that callback function for server synchronization.</p>
                        <pre><code>
var source =
{
    url: url,
    datatype: "json",
    datafields:
    [
        { name: 'firstname', type: 'string' },
        { name: 'lastname', type: 'string' },
        { name: 'productname', type: 'string' },
        { name: 'quantity', type: 'number' },
        { name: 'price', type: 'number' },
        { name: 'total', type: 'number' }
    ],
    addrow: function (rowid, rowdata, position, commit) {
        // synchronize with the server - send insert command
        // call commit with parameter true if the synchronization with the server was successful. 
        // and with parameter false if the synchronization has failed.
        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a Database. Example: commit(true, idInDB) where "idInDB" is the row's ID in the Database.
        commit(true);
    }
};
 </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fZhEc/">Invoke the addrow method of the  jqxGrid.</a>
                        </div>
                        The last parameter of the <code>addrow</code> method is optional. You can use values like: "first" and "last"(default value). If you pass "first", the new row will be added as a first row.
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Selection(requires jqxgrid.selection.js) 
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span76'>selectrow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'</p>
                        <p>
                            Selects a row.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>selectrow</code> method.
                        </p>
                        <pre><code>
// @param Number. The row's bound index.
$('#jqxGrid').jqxGrid('selectrow', 10);
                        </code></pre>
                        <h4>Code example - Select a Row using its Display Index</h4>
                        <p>
                            Invoke the <code>selectrow</code> method.
                        </p>
                        <pre><code>
// select the second row displayed in the Grid.
var index = $('#jqxGrid').jqxGrid('getrowboundindex', 1);
$('#jqxGrid').jqxGrid('selectrow', index);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FQxrf/">Invoke the selectrow method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span77'>unselectrow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'</p>
                        <p>
                            Unselects a row.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>unselectrow</code> method.
                        </p>
                        <pre><code>
// @param Number. The row's bound index.
$('#jqxGrid').jqxGrid('unselectrow', 10);
                        </code></pre>
                        <h4>Code example - Unselect a Row using its Display Index</h4>
                        <p>
                            Invoke the <code>unselectrow</code> method.
                        </p>
                        <pre><code>
// unselect the second row displayed in the Grid.
var index = $('#jqxGrid').jqxGrid('getrowboundindex', 1);
$('#jqxGrid').jqxGrid('unselectrow', index);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tQhCS/">Invoke the unselectrow method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span109'>selectallrows</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The  selection mode should be set to: 'multiplerows' or 'multiplerowsextended'</p>
                        <p>
                            Selects all Grid rows.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>selectallrows</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('selectallrows');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Jbsd8/">Invoke the selectallrows method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span155'>selectcell</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'</p>
                        <p>
                            Selects a cell.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>selectcell</code> method.
                        </p>
                        <pre><code>
// @param Number. The row's bound index.
// @param String. The column datafield.
$('#jqxGrid').jqxGrid('selectcell', 10, 'firstname');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Fwndr/">Invoke the selectcell method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span156'>unselectcell</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'</p>
                        <p>
                            Unselects a cell.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>unselectcell</code> method.
                        </p>
                        <pre><code>
// @param Number. The row's bound index.
// @param String. The column datafield.
$('#jqxGrid').jqxGrid('unselectcell', 10, 'firstname');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zxYc9/">Invoke the uneslectcell method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span95'>clearselection</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Clears the selection.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>clearselection</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('clearselection');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TsSmh/">Invoke the clearselection method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span78'>getselectedrowindex</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'</p>
                        <p>
                            Gets the bound index of the selected row. Returns -1, if there's no selection. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getselectedrowindex</code> method.
                        </p>
                        <pre><code>
var rowindex = $('#jqxGrid').jqxGrid('getselectedrowindex');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JMLRB/">Invoke the getselectedrowindex method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span108'>getselectedrowindexes</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'</p>
                        <p>
                            Gets the indexes of the selected rows. Returns an array of the selected rows.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getselectedrowindexes</code> method.
                        </p>
                        <pre><code>
var rowindexes = $('#jqxGrid').jqxGrid('getselectedrowindexes');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Vus5k/">Invoke the getselectedrowindexes method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span157'>getselectedcell</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'</p>
                        <p>
                            Gets the selected cell. The returned value is an Object with two fields: 'rowindex' - the row's bound index and 'datafield' - the column's datafield.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getselectedcell</code> method.
                        </p>
                        <pre><code>
var cell = $('#jqxGrid').jqxGrid('getselectedcell');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vFJ35/">Invoke the getselectedcell method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span158'>getselectedcells</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'</p>
                        <p>
                            Gets all selected cells. Returns an array of all selected cells. Each cell in the array is an Object with two fields: 'rowindex' - the row's bound index and 'datafield' - the column's datafield.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getselectedcells</code> method.
                        </p>
                        <pre><code>
var cells = $('#jqxGrid').jqxGrid('getselectedcells');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kBNWp/">Invoke the getselectedcells method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Aggregates(requires jqxgrid.aggregates.js) 
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span98'>refreshaggregates</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Refreshes the Aggregates in the Grid's status bar.</p>

                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>refreshaggregates</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('refreshaggregates');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TLq9d/">Invoke the refreshaggregates method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span101'>renderaggregates</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Renders the aggregates in the Grid's status bar.</p>

                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>renderaggregates</code> method.
                        </p>
                        <pre><code>
$('#jqxGrid').jqxGrid('renderaggregates');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Ne5a9/">Invoke the renderaggregates method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span102'>getcolumnaggregateddata</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets the aggregated data of a Grid column. Returns a JSON object. Each field name is the aggregate's type('min', 'max', 'sum', etc.).</p>

                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getcolumnaggregateddata</code> method.
                        </p>
                        <pre><code>
var summaryData = $("#jqxGrid").jqxGrid('getcolumnaggregateddata', 'quantity', ['min', 'max']);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3y7RN/">Invoke the getcolumnaggregateddata method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <th>Export(requires jqxdata.export.js and jqxgrid.export.js) 
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span159'>exportdata</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Exports all rows loaded within the Grid to Excel, XML, CSV, TSV, HTML or JSON.
                        </p>
                        <br />
                        The first parameter of the export method determines the export's type - 'xls', 'xml', 'html', 'json', 'pdf', 'tsv' or 'csv'.
                         <br />
                        The second parameter is the file's name. If you don't provide a file name, the Grid will export the data to a local variable. 
                        <br />
                        For example:
                        <pre><code>var data = $("#jqxgrid").jqxGrid('exportdata', 'json');</code></pre>
                        <br />
                        The third parameter is optional and determines whether to export the column's header or not. Acceptable values are - true and false. By default, the exporter exports the columns header.                    
                         <br />
                        The fourth parameter is optional and determines the array of rows to be exported. By default all rows are exported. Set null, if you want all rows to be exported.                   
                         <br />
                        The fifth parameter is optional and determines whether to export hidden columns. Acceptable values are - true and false. By default, the exporter does not export the hidden columns.                  
                         <br />
                        The sixth parameter is optional and determines the url of the export server. By default, the exporter is hosted on a jQWidgets server.
                        <br />
                        The last parameter is optional and determines the char set.
                         <h4>Code example</h4>
                        <p>
                            Invoke the <code>exportdata</code> method.
                        </p>
                        <pre><code>
 $("#jqxGrid").jqxGrid('exportdata', 'json', 'jqxGrid');
                        </code></pre>
                        <h4>Code example with custom URL parameter </h4>
                        <pre><code>
 $("#jqxGrid").jqxGrid('exportdata', 'json', 'jqxGrid', true, null, true, http://www.myserver.com/save-file.php);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qs5mr/">Invoke the exportdata method of the  jqxGrid.</a>
                        </div>
                        <br />
                        Export to Excel works with the ExcelML format. ExcelML is XML-based file format. It complies to the <a href="http://msdn.microsoft.com/en-us/library/aa140066(office.10).aspx">Microsoft XMLSS specification</a> and is supported in Microsoft Office 2003 and later. 
                        <br />
                        * When you open export to Excel, you may receive the following message: "The file you are trying to open, 'file_name.xls', is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening this file. Do you want to open the file now?"
                        <br />
                        The reason of this warning message is explained in details in the following post: <a href="http://blogs.msdn.com/b/vsofficedeveloper/archive/2008/03/11/excel-2007-extension-warning.aspx">excel-2007-extension-warning.aspx</a>
                    </div>
                </td>
            </tr>

            <tr>
                <th>Save/Load State(requires jqxgrid.storage.js) 
                </th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span186'>savestate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Saves the Grid's current state. the savestate method saves the following information: 'sort column, sort order, page number, page size, applied filters and filter row values, column widths and visibility, cells and rows selection and groups.  
                        </p>
                        <br />
                        The method saves the Grid's state, but also returns a JSON object with the state. In case of browsers that do not support localStorage, you can pass the state object to the 'loadState' method.           
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>savestate</code> method.
                        </p>
                        <pre><code>
 var state = $("#jqxGrid").jqxGrid('savestate');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/L4L3P/">Invoke the savestate method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span187'>loadstate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Loads the Grid's state. the loadstate method loads the following information: 'sort column, sort order, page number, page size, applied filters and filter row values, column widths and visibility, cells and rows selection and groups.  
                        </p>
                        <br />
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>loadstate</code> method.
                        </p>
                        <pre><code>
 $("#jqxGrid").jqxGrid('loadstate');
                        </code></pre>
                        <h4>Code example with state object returned from the 'savestate' method.</h4>
                        <p>
                            Invoke the <code>loadstate</code> method.
                        </p>
                        <pre><code>
 $("#jqxGrid").jqxGrid('loadstate', state);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nyPsV/">Invoke the loadstate method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span188'>getstate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the Grid's state. the getstate method gets the following information: 'sort column, sort order, page number, page size, applied filters and filter row values, column widths and visibility, cells and rows selection and groups.  
                        </p>
                        The returned value is a JSON object with the following fields:
                        <ul>
                            <li>width - the Grid's width.</li>
                            <li>height - the Grid's height.</li>
                            <li>pagenum - the Grid's page number.</li>
                            <li>pagesize - the Grid's page size.</li>
                            <li>pagesizeoptions - the Grid's page size options - an array of the available page sizes.</li>
                            <li>sortcolumn - the Grid's sort column. The value is the column's datafield or null, if sorting is not applied.</li>
                            <li>sortdirection - JSON Object with two boolean fields: 'ascending' and 'descending'.</li>
                            <li>filters - the applied filters. See the 'getfilterinformation' method.</li>
                            <li>groups - the Grid's groups array which contains the grouped columns data fields.</li>
                            <li>columns - an array of Columns. Each column in the array has the following fields:
                                <ul>
                                    <li>width - column's width.</li>
                                    <li>hidden - column's visible state.</li>
                                    <li>pinned - column's pinned state.</li>
                                    <li>groupable - column's groupable state.</li>
                                    <li>resizable - column's resizable state.</li>
                                    <li>draggable - column's draggable state.</li>
                                    <li>text - column's text.</li>
                                    <li>align - column's align.</li>
                                    <li>cellsalign - column's cells align.</li>
                                </ul>
                            </li>
                        </ul>
                        <br />
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getstate</code> method.
                        </p>
                        <pre><code>
 var state = $("#jqxGrid").jqxGrid('getstate');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WMD85/">Invoke the getstate method of the  jqxGrid.</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
